How to dynamically set content to TinyMCE editor

Question

I'm trying to dynamically set the content to the TinyMCE editor, based on the selected option from the drop down menu.

<app-tinymce [elementId]="'myEditor'" [content]="myContentVar"></app-tinymce>

The variable myContentVar gets updated correctly every time the drop down menu selection is changed.

onSelectionChanged(selectedValue: string){
    this.myContentVar = selectedValue;
}

But still, the TinyMCE editor always shows blank. {{myContentVar}} does show the correct value though.

Below is the configuration setup for TinyMCE.

tinymce.init({
      selector: '#' + this.elementId,
      plugins: ['link image code charmap preview anchor'],
      toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',

      setup: editor => {
        this.editor = editor;

        editor.on('change', () => {
          const content = editor.getContent();
          this.editorContent = content;
          this.onEditorContentChange.emit(content);
          this.onModelChange(content);
          this.onTouch(content);

          if (this._controlContainer) {
            if (this.formControlName) {
              this.control = this._controlContainer.control.get(this.formControlName);
              if (this.control) {
                this.control.setValue(new RichFieldTextModel(this.formControlName, this.elementId, this.editorContent));
              }
            }
          }
        });
      }
    });

When does you TinyMCE initialization occur? Before the Angular code by any chance (i.e. do you have a race condition or ordering issue?) — Fenton

Michael Fromin Michael Fromin · Accepted Answer · 2017-11-13T15:41:28

The issue you are dealing with is that once TinyMCE is instantiated on the page it won't look back at the <textarea> to see if that has changed.

The "on change" code you have in your example is focused on placing the latest content from TinyMCE back into the underlying form field as things are changed in the editor. Something like that is common when injecting TinyMCE in any of the modern frameworks like Vue, React, or Angular. What does not happen based on your code is the reverse - updating TinyMCE when the form field changes.

What I would suggest is that use TinyMCE's APIs (specifically setContent()) to update the editor when the select list is changed. Using that API will trigger your existing code to update the underlying form field after you perform the setContent().

If you only have one TinyMCE instance on the page you can use something like:

onSelectionChanged(selectedValue: string){
    //assumes selectedValue is the HTML you want to insert
    tinymce.activeEditor.setContent(selectedValue);  
}

How to dynamically set content to TinyMCE editor

1 Answers