如何为TinyMCE编辑器动态设置内容

Question

我正在尝试根据下拉菜单中的选定选项将内容动态设置为TinyMCE编辑器。

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

每次更改下拉菜单选择时，变量myContentVar都会正确更新。

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

但是，TinyMCE编辑器始终显示空白。 {{myContentVar}}确实显示了正确的值。

以下是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));
              }
            }
          }
        });
      }
    });

Answer 1

您要解决的问题是，一旦在页面上实例化TinyMCE，就不会再查看<textarea>来查看是否已更改。

您的示例中的“按需更改”代码着重于在编辑器中进行更改时将TinyMCE的最新内容放回到基础表单字段中。 当在任何现代框架（如Vue，React或Angular）中注入TinyMCE时，类似的事情很常见。 相反，根据您的代码不会发生-在表单字段更改时更新TinyMCE。

我的建议是，在更改选择列表时，使用TinyMCE的API（特别是setContent() ）来更新编辑器。 执行setContent()后，使用该API将触发您现有的代码来更新基础表单字段。

如果页面上只有一个TinyMCE实例，则可以使用以下方法：

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