Как обновить содержимое редактора TinyMCE в Angular после изменения переменной @Input?

Question

У меня есть компонент Angular для отображения формы в редакторе TinyMCE, но редактор TinyMCE - это другой компонент.Вот код:

blog-edit.component.ts:

export class BlogEditComponent implements OnInit {
  private data = {};

  constructor(
    private blogService: BlogService,
    private location: Location) {
      if (this.location.path().match(/^\/blog\/edit\/(\d+)$/) ) {
        const id = this.location.path().replace(/^\/blog\/edit\/(\d+)$/, '$1');
        this.loadToEdit( Number(id) );
      }
  }

  loadToEdit(id: number) {
    this.blogService.getOne(id).subscribe(response => {
      const data = response.json();

      // ... here do some data conversion process

      // publish loaded and parsed datas
      this.data = data;

    }, error => {
      // ...
    });
  }
}

blog-edit.component.html

<app-tinymce-editor elementId="_content" [content]="data.content"
  (editorContentChange)="tinyMcePreviewUpdater($event)"></app-tinymce-editor>

tinymce-editor.component.ts:

import { Component, Input, Output, EventEmitter,
         AfterViewInit, OnDestroy } from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
// plugins
import 'tinymce/plugins/table';

declare let tinymce: any;

@Component({
  selector: 'app-tinymce-editor',
  templateUrl: './tinymce-editor.component.html',
  styleUrls: ['./tinymce-editor.component.css']
})
export class TinymceEditorComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: string;
  @Input() content: string;
  @Output() editorContentChange = new EventEmitter();

  editor: any;
  opions = {
    selector: undefined,
    setup: undefined,
    // other tinymce init options
  };

  ngAfterViewInit() {
    this.options.selector = '#' + this.elementId;
    this.options.setup = editor => {
      this.editor = editor;
      this.editor.on('keyup change', () => {
        this.editorContentChange.emit( editor.getContent() );
      });
    };

    tinymce.init(this.options);
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }

}

tinymce-editor.component.html

<textarea id="{{ elementId }}" name="{{ elementId }}"></textarea>

Теперь проблема в том, что сначала инициализируется TinyMCE, после чего загружаются данные, а содержимое редактора не обновляется..

Как обновить содержимое редактора, если переменная content записана в tinymce-editor.component.ts?

Answer 1

Если вы инициализируете TinyMCE на каждом textarea до того, как у каждого textarea будет свое содержимое, то TinyMCE не будет автоматически возвращаться и обновляться, когда textarea обновляется с контентом - TinyMCE просто так не работает .

Вы можете использовать API TinyMCE (например, setContent())

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent) для обновления редактора

... для добавления содержимого после получения данных. В качестве альтернативы вы можете отложить инициализацию TinyMCE до тех пор, пока данные не будут загружены в каждый textarea.

Ни один из подходов не является лучшим / худшим - безусловно, существует множество способов решить эту проблему, и все они работают, если реализованы надлежащим образом.