如何将内容动态设置到 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> 以查看是否已更改。

您在示例中的“on change” 代码专注于将 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);  
}