angular - TinyMCE 和 Angular 2 : Setting The Editor's Content Based On @Input

Question

刚接触tinymce，不确定将setContent(this.content) 方法实际放置在哪里。我当前的版本导致我收到错误:

TypeError: null 不是对象(正在计算“body.nodeName”)--- runTask — zone.js:170

Angular 色对象是通过查询我的数据库的服务检索的，该服务工作正常。

我在 persona.component.html 中设置了像这样的实例:

<app-tinymce
   [elementId]="'persona-footnotes'"
   (onEditorContentChange)="keyupHandler($event)"
   [content]="persona.footnotes"
   ></app-tinymce>

app-tinymce.component.ts:

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

declare let tinymce: any;

@Component({
  selector: 'app-tinymce',
  templateUrl: './tinymce.component.html',
  styleUrls: ['./tinymce.component.scss']
})
export class TinymceComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Input() content: String;
  @Output() onEditorContentChange = new EventEmitter();

  editor;

  ngAfterViewInit() {
    tinymce.init({
      selector: '#' + this.elementId,
      plugins: ['link', 'table', 'lists', 'advlist', 'code'],
      skin_url: '/assets/tinymce/skins/lightgray',
      toolbar: [
        'bold italic underline strikethrough subscript superscript removeformat | formatselect | fontsizeselect | bullist numlist outdent indent | link table | code'
      ],
      menubar:'edit',
      theme:'modern',
      height:'300',
      setup: editor => {
      editor.setContent(this.content);
      console.log(this.content); // this part outputs the correct data
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      }
    });
  }

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

认为这是在哪里/“何时”放置 setContent(this.content) 方法的问题，但又不确定在哪里？

Answer 1

你很接近。您的设置函数需要延迟 setContent() 调用，直到编辑器初始化。有一个事件，所以你可以尝试这样的事情:

setup: editor => {
    this.editor = editor;
    editor.on('init', () => {
      editor.setContent(this.content);
    });
  }

这将延迟对 setContent() 的调用，直到编辑器初始化并准备好使用 API 调用。