TinyMCEエディタにコンテンツを動的に設定する方法

Question

ドロップダウンメニューから選択したオプションに基づいて、コンテンツをTinyMCEエディタに動的に設定しようとしています。

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

変数myContentVarは、ドロップダウンメニューの選択が変更されるたびに正しく更新されます。

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

しかし、TinyMCEエディタでは常に空白が表示されます。しかしは正しい値を示しています。

以下は、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()）を使用して、選択リストが変更されたときにエディタを更新することをお勧めします。このAPIを使用すると、setContent()を実行した後に、既存のコードが基になるフォームフィールドを更新するようになります。

あなただけのようなものを使用することができますページの1つのTinyMCEのインスタンスを持っている場合：あなたはTinyMCEの初期発生した場合には

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