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>以查看是否已更改。

您的示例中的 ＆＃34;更改＆＃34; 代码专注于将来自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);  
}

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

1 个答案: