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

我试图根据下拉菜单中选择的选项，动态地将内容设置到TinyMCE编辑器

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

但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));
              }
            }
          }
        });
      }
    });

---

您要处理的问题是，一旦TinyMCE在页面上实例化，它就不会回头查看

以查看是否发生了变化

示例中的“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);  
}

---

您要处理的问题是，一旦TinyMCE在页面上实例化，它就不会回头查看

以查看是否发生了变化

示例中的“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);  
}

---

TinyMCE初始化何时发生？在角代码之前（即，您是否有竞态条件或订购问题？），何时进行TinyMCE初始化？在Angular code之前（即，您是否有比赛条件或订购问题？）非常感谢您的建议，Michael。它成功了。非常感谢你的建议，迈克尔。成功了。