Tiny Mce Angular 2/4双向绑定 [英] Tiny Mce Two way Binding with Angular 2/4

问题描述

这是我的tinymce.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);
  }
}

现在我正在使用我的html，因为现在我可以通过keyupHandlerFunction来获取文本，但是我想用ngModel

and now i am using it my html as under now i can get the text through the keyupHandlerFunction but i want 2 way binding with ngModel

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

这段代码是tinyMCE建议的，但是我想在这里ngModel 对于2种方式绑定，我该怎么办

This code is what the tinyMCE have suggested but i want ngModel here for 2 way binding how can i do it here

喜欢:

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

<p>{{ "My Model" + model}} </p>

推荐答案

您应实现 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示例

Stackblitz Example

表格内的示例

Example inside form

这篇关于Tiny Mce Angular 2/4双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！