Tinymce角度2統合：エディタの内容を設定するには？

Question

私はTinyMCEを私の角度2のアプリケーションに統合し、それは完全に動作します。 これで、エディタのデフォルトの内容を設定できるように、@ Inputプロパティを渡したいと思います。

Answer 1

あなたが@Directiveを実装していると仮定すると、説明したようにin TinyMCE official documentation：

@Inputパラメータを追加します。エディタの設定と実行時オプションで tinymce.init({})オブジェクトを配置する必要がngAfterViewInit()で

@Input() initialContent: String; 

。あなたはディレクティブを呼び出しているとき

 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> 

この実装は、私は同じ問題を抱えていたと@nicofx答えを実装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

のコメントに基づいています。しかし、非同期のhttp呼び出しでコンテンツが設定されたときには、これはやりませんでした。渡された場合

@Input() contentEvent: EventEmitter<string>; 

が持つEventEmitter登録：：

が入力を定義します：HTTP呼び出しが終了したconentを更新持つ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

もう少し簡単にすることもできます。 ちょうどあなたがTinyMCEのコンポーネントを使用して、あなたのビューで@Inputテキスト追加：

@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>