TinyMCE 및 Angular 2 : @Input을 기반으로 편집기의 내용 설정

Question

tinymce에 새로 왔고 setContent (this.content) 메소드를 실제로 배치 할 위치가 확실하지 않습니다. 나의 현재 버전은 나 오류가 발생하는 원인이된다

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

페르소나 개체가 제대로 작동 내 데이터베이스를 조회하는 서비스를 통해 검색됩니다.

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

응용-tinymce.component.ts :

내 인스턴스 내 persona.component.html에서 이와 같은 설정이이 생각

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/"when"setContent (this.content) 메소드를 넣을 수 있지만 어디서 확실하지 않은가?

Answer 1

가까이 있습니다. 설정 기능은 편집기가 초기화 될 때까지 setContent() 호출을 지연시켜야합니다. 에디터가 초기화하고 API 호출을 사용할 준비가 될 때까지이 setContent()에 전화를 지연시킬

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

: 당신이 뭔가를 시도 할 수 있도록 그에 대한 이벤트가있다.

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

 
}