@Input 变量更改后如何在 Angular 中更新 TinyMCE 编辑器内容？答案

【问题标题】：How to update TinyMCE editor content in Angular after @Input variable changed?@Input 变量更改后如何在 Angular 中更新 TinyMCE 编辑器内容？
【发布时间】：2019-01-04 10:56:47
【问题描述】：

我有一个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 中被更改时，我如何更新编辑器的内容？

【问题讨论】：

标签： angular initialization tinymce

【解决方案1】：

如果您在每个textarea 具有其内容之前在每个textarea 上初始化 TinyMCE，那么当 textarea 更新内容时，TinyMCE 不会自动返回并更新自身 - TinyMCE 只是无法以这种方式工作.

您可以使用 TinyMCE API（例如 setContent()）

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent) 更新编辑器的

...在获取数据后注入内容。或者，您可以延迟初始化 TinyMCE，直到将数据提取到每个 textarea 之后。

这两种方法都不是更好/更差 - 当然有多种方法可以解决这个问题，如果实施得当，它们都可以工作。

【讨论】：

问题是如何检测content 变量何时更新，我需要运行setContent() 方法？
您的loadToEdit 函数的成功处理程序是否在数据返回后被调用？也许那是您应该更新 TinyMCE 的时候？
但这超出了我的tinymce-editor.component.ts，如果我将tinymce更新逻辑移到那里，这意味着我也需要移动init函数......并且spearated组件在此失去了意义点......但你给了我一个想法，将editor变量与EventEmitter一起使用
那不是一个可行的想法，所以这不是正确的方法:(