Model data does not always show up in the tinymce window

[RichardAlan]

My team member is noticing a problem with a tinymce window that is inside a Angular UI Bootstrap tab. Here is the code she is using:

<input data-ng-model="modal.formData.text" type="text">
    <textarea
        data-ui-tinymce
        data-ng-disabled="modal.action=='delete'"
        data-ng-model="modal.formData.text"
        id="inputText"
        required></textarea>

We are using the very latest code as of July 24th. We have a normal table grid of data with an edit button as the first column on each row. When the edit button is clicked for the first time, the modal is opened, the tinymce window appears and the text is rendered inside the window and in the input box. On subsequent opens of the same or other rows in the grid tinymce window appears blank but the input box is always populated.

Some more information:

I added some console.log statements:

 if (!tinyInstance) {
          console.log("Making a new instance");
          tinyInstance = tinymce.get(attrs.id);
      }
        if (tinyInstance) {
            console.log("setting context");
            console.log(tinyInstance);
            console.log(ngModel.$viewValue);
          tinyInstance.setContent(ngModel.$viewValue || '');
      }

It appears that the tinyInstance.setContent is trying to set valid data. But 2nd and subsequent times around the tinymce window still does not show anything.

When changing the code to the following then the problem goes away:

  ngModel.$render = function () {
        //if (!tinyInstance) {
        console.log("Making a new instance");
        tinyInstance = tinymce.get(attrs.id);
        //}
        if (tinyInstance) {
            console.log("setting context");
            console.log(tinyInstance);
            console.log(ngModel.$viewValue);
            tinyInstance.setContent(ngModel.$viewValue || '');
        }
    };

[esgy]

Same issue here.
Thanks for the dirty fix ;)

[PaulWatts]

We are having exactly the same problem. Can anyone advise if this will be fixed in the next release ?

[mjadobson]

Yeah, same issue again. The dirty fix seems to have sort-of-worked for now.

Had some errors like this show up in the console: Error: 'undefined' is not an object (evaluating 'o.createRange')

[SET001]

@RichardAlan, thanx, that hack really solved this problem.

[cparaiso]

@RichardAlan to the rescue!

[rowinf]

I've been running into a similar problem when tinymce is in a ng-switch or ng-if directive.

[macl]

Thanks @RichardAlan, your code solved similar issue for me too. Hope this is fixed soon!

[Estyn]

We solved a similar issue by making sure that the tinymce is destroyed properly. This way it will create a new instance when needed.

elm.bind("$destroy", function () {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinymce.get(attrs.id).remove()
}
});

[displague]

Issue #49 looks like a dupe with yet another workaround.

[ajshapiro]

Thanks @Estyn, removing the instance when the scope is destroyed seems critical and in fact solved my similar problem.

[wesleycho]

It appears that this fix is already in master - please comment if it is still an issue.

[grantgeorge]

@wesleycho will this be updated in a bower release soon?

[wesleycho]

I believe it's in the latest version - let me know if not.

[grantgeorge]

@wesleycho thanks for the quick reply man! It doesn't appear to be in 0.0.5 (the latest as indicated by bower list). Thank you!