TinyMCE＆Angular 2：基於@Input設置編輯器內容

Question

新增了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); 
    } 
} 

認爲這是一個事where /「何時」放置setContent（this.content）方法，但又不知道在哪裏？

Answer 1

你就近了。您的設置功能需要延遲撥打setContent()，直到編輯器初始化。沒有爲一個事件，所以你可以嘗試這樣的事：

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

，直到編輯器初始化並準備供您使用API​​調用這將調用耽誤setContent()。

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); 
 
    } 
 

 
}