どのようにコンポーネントからデータを2角形で結合するのか

Question

これで角膜のcliに成功しました。tutorial、 私は今、問題をどのようにバインドするか、コンポーネントの値をt​​inymce textareaに渡します。

たとえば、私はproduct.component.tsと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); 
} 
} 

TinyMCEのディレクティブはproduct.component.htmlに

product.component.htmlです

Answer 1

ここで私はそれをしました。完璧な双方向バインディングではありませんが、私のユースケースでは機能します。また、ngOnChagesを使ってエディタを更新することもできます。そうすれば、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

、単にあなたの答えのための

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