Question

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

2017-04-13

3926

angular data-binding tinymce

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

TypeError：null 不是对象（评估“body.nodeName”）--- runTask — zone.js:170

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

我在 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 调用为止。

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

}