Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

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

Closed
@S7Kronos

Description

@S7Kronos

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()));
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions