angular-ui / ui-tinymce

AngularUI wrapper for TinyMCE
MIT License
488 stars 371 forks source link

Multiple ui-tinymce elements do not have unique ids #310

Closed S7Kronos closed 7 years ago

S7Kronos commented 7 years ago

Views with multiple tinymce elements in it do not always get a unique ID assigned to them by the directive.

The directive always generates a unique ID for the HTML element used for the tinymce editor, and it generates the unique id using a timestamp (see line 54 in the code). If the browser builds the view fast enough then multiple tinymce elements could have duplicate IDs. When this occurs only the first tinymce element is setup correctly when the view finishes initializing.

This does not appear to effect tinymce textarea elements as frequently, but in my case I have multiple inline tinymce div elements. Also note that the first time the app loads a view containing multiple tinymce inline elements it usually initializes correctly (initialization is slow enough), but as you navigate around the app and return to the view most of the tinymce elements do not setup correctly (setup is quicker and the elements have duplicate ids).

Sorry I do not have a plunker example or have time to submit a patch. To demonstrate this imagine a user editing a list of products.

  1. The user views a list of products and clicks the Edit Product link.
  2. The app loads the edit product form containing three tinymce inline elements. (form loads correctly)
  3. User goes back to the product list and edits a different, or the same, product.
  4. The app loads the edit product form but only one tinymce element is setup correctly.

To work around this I provide an id element in the HTML (<div id="mycontent1" ui-tinymce=""></div>), and I've updated the following code.

// generate an ID if(angular.isUndefined(attrs.id)) { attrs.$set('id', ID_ATTR + '-' + (new Date().valueOf())); }