TinyMCE & Angular 2：根据@Input设置编辑器的内容

Question

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

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

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

我在我的角色中设置了这样的实例.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 调用。

Answer 2

这是我为 TinyMCE 编辑器组件编写的完整代码。这可能会有所帮助。

import { Component, AfterViewInit, OnDestroy, Input, Output, EventEmitter, ElementRef, provide, forwardRef, View } from 'angular2/core';
import { RdComponent, RdLib } from '../../../../../node_modules/mulberry/core';
declare let tinymce: any;
@Component({
selector: 'aril-mail-template',
template: `<textarea style="height:25em"><p>{{model}}</p></textarea>`
})
export class MailTemplatesComponent extends RdComponent {
@Input("rd-model") model;
@Input("rd-default") default;
@Input("rd-required") required;
@Output("mail-template-save") mailTemplateSave: EventEmitter<any> = new EventEmitter<any>();
editor;
ngOnInit() {
let that = this;
tinymce.init({
selector: 'textarea',
height: "25em",
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen hr',
'insertdatetime media table contextmenu paste spellchecker',
'wordcount'
],
toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image spellchecker code',
table_toolbar: "tableprops cellprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol",
powerpaste_allow_local_images: true,
powerpaste_word_import: 'prompt',
powerpaste_html_import: 'prompt',
spellchecker_language: 'en',
spellchecker_dialog: true,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'],
setup: editor => {
this.editor = editor;
editor.on('init', () => {
this.model && this.editor.setContent(this.model, {format: 'raw'});
});
editor.on('change', () => {
const content = editor.getContent();
this.mailTemplateSave.emit(content);
});
}      
});    
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}