angular - TinyMCE和Angular 2:基于@Input设置编辑器的内容

tinymce的新手，并且不确定将setContent（this.content）方法实际放在何处。我当前的版本导致我收到错误消息：

TypeError: null is not an object (evaluating 'body.nodeName') --- runTask — zone.js:170

通过查询我的数据库的服务来检索角色对象，该数据库运行正常。

我在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）方法放在何处/何时何处有关，但是再次不确定是否在哪里？

最佳答案

你近了您的设置功能需要延迟setContent()调用，直到初始化编辑器为止。有一个事件可以尝试这样的事情：

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