如何為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);  
}