Question

我已成功将tinymce整合到angular2 cli中tutorial，我现在的问题是，如何将组件中的值绑定或传递给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?


 }
}

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

Answer 1

我是这样做的。它不是完美的双向绑定，但它适用于我的用例。你也可以使用ngOnChages t来更新编辑器，这样它就会更新父组件中'model'输入的变化，而不是在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

即可

＆＃13;

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

＆＃13;

如何将组件中的数据绑定到带有角度为2 cli的tinymce

2 个答案: