如何使用angular 2 cli将数据从组件绑定到tinymce

我已经成功地将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>

simple-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);
}
}

导入{
组成部分，
OnDestroy，
AfterViewInit，
事件发射器，
输入，
输出
}从“@angular/core”开始；
@组成部分({
选择器：'simple tiny'，
模板：``
})
导出类SimpleTinyComponent实现AfterViewInit、OnDestroy{
@Input（）elementId:String；
@Output（）onEditorKeyup=neweventemitter（）；
编辑
ngAfterViewInit（）{
tinymce.init({
选择器：'#'+this.elementId，
插件：['link'，'paste'，'table']，
皮肤url:“资产/皮肤/浅灰色”，
设置：编辑器=>{
this.editor=editor；
编辑器.on（'keyup'，（）=>{
const content=editor.getContent（）；
this.oneditworkeyup.emit（content）；
});
},
});
}
恩贡德斯特罗（）{
tinymce.remove（this.editor）；
}
}

以下是我是如何做到的。它不是完美的双向绑定，但它适用于我的用例。您还可以使用

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);
    }
}

导出类HtmlEditorComponent实现AfterViewInit、OnDestroy
{
@Input（）elementId:String；
@Input（）模型：字符串；
@Output（）modelChange=neweventemitter（）；
tinymce=（窗口）；
编辑
ngAfterViewInit（）
{
this.tinymce.init({
选择器：'#'+this.elementId，
高度：'480'，
插件：[“粘贴”]，
主题:"现代",，
粘贴为文本：true，
设置：编辑器=>
{
this.editor=editor；
editor.on（'init'，（）=>
{
如果（此.model）
{
setContent（this.model）；
}
});
编辑器.on（'keyup'，（）=>
{
const content=editor.getContent（）；
this.modelChange.emit（内容）；
});
},
});
}
恩贡德斯特罗（）
{
this.tinymce.remove（this.editor）；
}
}

在您的情况下，只需将以下函数添加到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?


 }
}

keyupHandlerFunction（e）：无效{
console.log（e）；//e是TinyMCE组件的HTML输出
}

谢谢你的回答，但我还是搞不清楚..什么是编码模板：

？？你能给我举个完整的例子吗？