동적으로 내용을 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())를 사용하여 선택 목록이 변경 될 때 편집기를 업데이트하는 것입니다. 이 API를 사용하면 setContent()을 수행 한 후 기존 코드를 트리거하여 기본 양식 필드를 업데이트 할 수 있습니다.

당신은 단지 당신과 같이 사용할 수있는 페이지 하나 개 TinyMCE에 인스턴스가있는 경우 :

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