multiple textareas using angular ui-tinymce not displaying when using two controllers

Question

I am using ui-tinymce with angular 1.5 and am using it in two different locations on the page coming from two separate controllers. It will only work on one textarea at at time.

If i move both textareas to the same controller they display correctly. Or if i delete one textArea the other displays. Is there anything special needed to make ui-tinymce work from two controllers on one page? I am injecting ui-tincymce into both controllers.

Thank

Answer 1

I ran into the same issue and determined the reason is because the directive starts its ID numbering at 0 for each controller. (see var generatedIds = 0 in angular.tinymce.js on or around line 8). Someone with more under-the-hood knowledge of Angular could explain why the directive "resets" for every controller, but the root issue is that the directive is reusing IDs. The fix I came up with is to modify angular.tinymce.js to replace:

attrs.$set('id', ID_ATTR + '-' + generatedIds++);

with

attrs.$set('id', ID_ATTR + '-' + String(new Date().getTime());

It's not ideal but it fixed my issue immediately. getTime() is milliseconds since Jan 1 1970, so it counts up quite rapidly (meaning, the chances of a collision are extremely slim). You could combine this with something like + String(Math.round(Math.random() * 100000)) if you're truly paranoid that your JavaScript might run fast enough (or threaded enough, someday) to initialize two tinymce editors on the same millisecond.