Tinymce Angular 2集成：如何設置編輯器的內容？

Question

我將TinyMCE集成到我的角度2應用程序中，它完美地工作。 現在我想傳遞@Input屬性，以便可以設置編輯器的默認內容。

有什麼想法？

Answer 1

假設你正在實施@Directive的解釋在TinyMCE official documentation：

加一個額外的@Input參數：

@Input() initialContent: String; 

在ngAfterViewInit()你必須把 tinymce.init({})對象與編輯器的配置和運行時選項。它的存在，你還可以添加新的功能：

 init_instance_callback: (editor: any) => { 
      editor && this.initialContent && this.editor.setContent(this.initialContent) 
     }, 

最後，當你呼叫的指令，你必須爲你的@Input參數使用比你在使用相同的名稱添加一個新的屬性指令的定義。

<textarea class="form-control" id="wysiwygText" name="body" rows="3" [htmlEditor] initialContent="{{model.body}}" [(ngModel)]="model.body" #body="ngModel" (onEditorKeyup)="keyupHandlerFunction($event)"></textarea> 

這個實現是基於this article

Answer 2

你必須實施的一個包裝，或嘗試將現有的 https://github.com/zackarychapple/ng2-tinymce-wyswig
https://github.com/luigiinred/ng2-tinymce

或者我知道這個工程肯定的：https://github.com/chymz/ng2-ckeditor

Answer 3

評論我有同樣的問題，並實現@nicofx答案。但是，當內容由異步http調用設置時，這並沒有訣竅。

具有相同問題的人：你可以使用哪些更新時，HTTP調用已完成conent的eventemitter：

定義輸入：

@Input() contentEvent: EventEmitter<string>; 

訂閱eventemitter如果傳遞：

ngAfterViewInit() { 
    tinymce.init({ 
     selector: '#' + this.elementId, 
     plugins: ['link', 'paste', 'table'], 
     skin_url: '/assets/skins/lightgray', 
     setup: editor => { 
      this.editor = editor; 

      if (this.contentEvent) { 
       this.contentEvent.subscribe(c => { 
        this.setContent(editor, c); 
       }); 
      } 
     } 
    }); 
} 

而且setcontent功能：

private setContent(editor, content) { 
    if (editor && content) { 
     this.editor.setContent(content); 
    } 
} 

Answer 4

你也可以做得更簡單一點。 只需添加文字@input在你看來，你用tinyMCE的組件：

<tinymce-editor 
    [desiredInitialText]="text" 
    (onEditorKeyup)="editorChangesHandler($event)"> 
</tinymce-editor> 

然後在你的TinymceComponent添加

@Input() desiredInitialText: string //Or any other special typing 

... 

ngOnChanges() { 
    if (this.editor) { 
    if (this.desiredInitialText && this.desiredInitialText.length > 0) { 
     this.editor.setContent(this.desiredInitialText) 
    } else { 
     this.editor.setContent(''); 
    } 
    } 
} 

Answer 5

這可能是有益的

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:15em"><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); 
 
    } 
 

 
}

<rd-service-provider #saveMailTemplateProvider [rd-service-proxy]="serviceProxy" (rd-success)="toastr.info(translate('Mail Şablonu Başarıyla Oluşturuldu.'));close()"></rd-service-provider> 
 
    
 
    
 
<aril-mail-template [(rd-model)]="data.MailContent" (mail-template-save)="mailContent = $event" [rd-required]="true"></aril-mail-template> 
 
    
 
<rd-footer> 
 
     <rd-submit [rd-text]="translate('Save')" rd-size="medium" (rd-   click)="saveMailTemplateProvider.call(saveMailTemplates($event, mailContent))"></rd-submit> 
 
</rd-footer>