如何將組件中的數據綁定到使用角度2 cli的tinymce

Question

我一直在成功將tinymce整合到angular2 cli中，現在我的問題是如何將組件的值綁定或傳遞到tinymce textarea。

例如，我有product.component.ts和product.component.html。 TinyMCE的指令是在product.component.html

product.component.html：

<simple-tiny 
[elementId]="'my-editor-id'" 
(onEditorKeyup)="keyupHandlerFunction($event)" 
> 
</simple-tiny> 

product.component.ts

import { Component,Input,OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-product', 
    templateUrl: './product.component.html' 
}) 
export class ProductComponent { 

my-editor-id:any -->error 
ngOnInit(): void { 

    this.my-editor-id="abcdefg"; --> error, i want bind abcdefg into tinymce are? how? 


} 
} 

簡單tiny.component.ts：

import { 
Component, 
OnDestroy, 
AfterViewInit, 
EventEmitter, 
Input, 
Output 
} from '@angular/core'; 

@Component({ 
selector: 'simple-tiny', 
template: `<textarea id="{{elementId}}"></textarea>` 
}) 
export class SimpleTinyComponent implements AfterViewInit, OnDestroy { 
@Input() elementId: String; 
@Output() onEditorKeyup = new EventEmitter<any>(); 

editor; 

ngAfterViewInit() { 
tinymce.init({ 
    selector: '#' + this.elementId, 
    plugins: ['link', 'paste', 'table'], 
    skin_url: 'assets/skins/lightgray', 
    setup: editor => { 
    this.editor = editor; 
    editor.on('keyup',() => { 
     const content = editor.getContent(); 
     this.onEditorKeyup.emit(content); 
    }); 
    }, 
}); 
} 
ngOnDestroy() { 
    tinymce.remove(this.editor); 
} 
} 

Answer 1

這就是我做到的。它不是完美的雙向綁定，但它適用於我的用例。你也可以使用ngOnChages t來更新編輯器，所以它會更新如果在父組件中更改'模型'輸入，而不是僅僅取得init的值。

<html-editor 
     [elementId]="'multi-line-text-editor'" 
     [model]="valueYouWantUpdated" 
     (modelChange)="valueYouWantUpdated = $event"> 
</html-editor> 

export class HtmlEditorComponent implements AfterViewInit, OnDestroy 
{ 
    @Input() elementId: String; 
    @Input() model: String; 
    @Output() modelChange = new EventEmitter<any>(); 

    tinymce = (<any>window).tinymce; 
    editor; 

    ngAfterViewInit() 
    { 
     this.tinymce.init({ 
      selector: '#' + this.elementId, 
      height: '480', 
      plugins: ['paste'], 
      theme: 'modern', 
      paste_as_text: true, 
      setup: editor => 
      { 
       this.editor = editor; 

       editor.on('init',() => 
       { 
        if (this.model) 
        { 
         editor.setContent(this.model); 
        } 
       }); 

       editor.on('keyup',() => 
       { 
        const content = editor.getContent(); 
        this.modelChange.emit(content); 
       }); 
      }, 
     }); 
    } 

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

Answer 2

在你的情況下，只需添加以下功能product.component.ts

keyupHandlerFunction(e):void{ 
 
    console.log(e); //e is the HTML output from your TinyMCE component 
 
    }