Question

我正在尝试为Angular 4实现TinyMce插件，但是找不到合适的解决方案。但是，我发现这个link提供了明确的TinyMce实现，包括双向绑定 - 这可以正常工作。因此，我想在Angular form – NgForm中使用此自定义组件。 如果我在表单中使用它，该组件已停止工作，我收到content property is null错误。任何人都可以告诉我如何重新实现它以便与形式（NgForm）一起使用吗？

<小时/>

此代码取自上面的（小编辑）链接。如果没有表单属性，它可以正常工作。

declare let tinymce: any;

import {
  AfterViewInit, Component, ElementRef, forwardRef, Input, NgZone, OnDestroy,
  ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

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) {
      console.log(this.editor);
      console.log(this.value);
      this.editor.setContent(value);
    }
  }

  ngAfterViewInit() {
    tinymce.init({
      target: this.textArea.nativeElement,
      plugins: ['link', 'paste', 'table'],
      skin_url: '/assets/skins/lightgray',
      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);
  }
}

无效

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
    <div class="form-group">
      <label for="content">Page content</label>
      <simple-tiny [(ngModel)]="page.content" name="content"></simple-tiny>
    </div>
    <button type="submit" class="btn btn-info">Add</button>
</form>

有效

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
    [...]
</form>

<simple-tiny [(ngModel)]="page.content" name="content"></simple-tiny>

组件保存模型

export class AddEditPageComponent implements OnInit {

  page: PageModel;
  constructor() { }

  ngOnInit() {
    this.page = new PageModel();

  }

  onSubmit(form:NgForm){

  }
}

来自TinyMceComponent的方法，我收到错误消息 - value is null.

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

Angular 4 tinymce双向绑定不工作的形式

0 个答案: