Angular 2-如何在TinyMCE编辑器中初始设置内容

时间:2018-06-26 09:48:56

标签: angular tinymce tinymce-4

我正在执行CRUD操作。发生什么情况,当我处于编辑路径时,我想要在editor.i上显示所有代码下方的内容。

tiny-editor.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/textcolor';
import 'tinymce/plugins/code';
declare var tinymce: any;

@Component({
    selector: 'text-editor',
    templateUrl: './tiny-editor.component.html',
    styleUrls: ['./tiny-editor.component.css']
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
    @Input() elementId: String;
    @Input() toolbar: String;
    @Output() onEditorContentChange:EventEmitter<any> = new EventEmitter();
    @Input() initialContent: String;

    editor;

    ngAfterViewInit() {
        tinymce.init({
            selector: '#' + this.elementId,
            menubar: false,
            branding: false,
            plugins: ['link', 'table', 'textcolor', 'code'],
            skin_url: 'assets/skins/lightgray',
            toolbar : this.toolbar,
            setup: editor => {
                this.editor = editor;
                // editor.on('keyup', () => {
                //     const content = editor.getContent();
                //     this.onEditorContentChange.emit(content);
                // });
                editor.on('Change',  () =>{
                    const content = editor.getContent();
                    this.onEditorContentChange.emit(content);
                  });
            },
            init_instance_callback: (editor: any) => {
                    editor && this.initialContent && this.editor.setContent(this.initialContent)
            }
        });
    }

    setContent(_content){
        this.editor.setContent(_content);
    }

    ngOnDestroy() {
        tinymce.remove(this.editor);
    }
}

tiny-editor.component.html

<textarea id="{{elementId}}">{{initialContent}}</textarea>

addComponent

 <text-editor #noteEditor [elementId]="'note-editor'"
      (onEditorContentChange)="EditorContentChange($event)"
      [toolbar]="toolbarConfig">
         {{portObject.descriptionHTML}}
 </text-editor>

从上方您可以看到“ portObject.descriptionHTML”是内容,我想向用户显示他们处于编辑路径时

0 个答案:

没有答案