Angular 2 - Как изначально установить контент в редакторе TinyMCE - PullRequest
Новая
       9

Angular 2 - Как изначально установить контент в редакторе TinyMCE

0 голосов
/ 26 июня 2018

Я выполняю операцию 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);
    }
}

крошечный 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" является содержимым, и я хочу показать пользователю, когда он находится в режиме редактирования.

...