Question

这是我的Iy

tinymce.component.ts

现在我正在使用它我的html现在我可以通过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); } }获取文本，但我希望双向绑定keyupHandlerFunction

ngModel

这段代码是tinyMCE建议的，但我想要<simple-tiny [elementId]="'my-editor-id'" (onEditorKeyup)="keyupHandlerFunction($event)" > </simple-tiny> 对于双向绑定我怎么能在这里做到

像：

ngModel

Answer 1

你应该实现ControlValueAccessor这样的事情：

export const TINYMCE_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SimpleTinyComponent),
  multi: true
};

@Component({
  selector: 'simple-tiny',
  template: `<textarea #textArea [value]="value"></textarea>`,
  providers: [TINYMCE_VALUE_ACCESSOR]
})
export class SimpleTinyComponent implements AfterViewInit, 
                                     OnDestroy,  ControlValueAccessor {
  @Input() elementId: String;

  @ViewChild('textArea') textArea: ElementRef;

  editor: any;

  value: string;

  onChange = (_: any) => { };

  constructor(private zone: NgZone) {}

  writeValue(value: any): void {
    this.value = value;
    if (this.editor) {
       this.editor.setContent(value || '');
    }
  }

  ngAfterViewInit() {
    tinymce.init({
      target: this.textArea.nativeElement,
      plugins: ['link', 'paste', 'table'],
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.zone.run(() => this.onChange(content))
        });
      }
    });
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { }

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

<强> Stackblitz Example

Example inside form

微小的Mce双向绑定与Angular 2/4

1 个答案: