Angular 4 TinyMCE双向绑定在NgForm中失效，content属性为空求助

嘿，我来帮你搞定这个Angular 4集成TinyMCE适配NgForm的问题！你之前的组件没法在表单里正常工作，核心原因是它没有实现Angular表单体系里的ControlValueAccessor接口——这是自定义组件和NgForm双向通信的必要桥梁。下面我一步步带你改造组件，让它完美适配表单：

首先，让你的TinyMCE组件类实现ControlValueAccessor接口，这个接口定义了四个必须实现的方法，用来处理表单和组件之间的数据流：

• writeValue(value: any): 接收表单控件传递过来的值，同步到TinyMCE编辑器
• registerOnChange(fn: any): 注册一个回调函数，当组件内部值变化时调用它通知表单
• registerOnTouched(fn: any): 注册一个回调函数，当组件被触摸（比如编辑器失去焦点）时调用，用于表单验证的脏值检测
• setDisabledState(isDisabled: boolean): 接收表单控件的禁用状态，同步到编辑器

在组件的@Component装饰器的providers数组里，把组件注册为NG_VALUE_ACCESSOR的提供者，这样Angular表单才能识别它是一个可绑定的表单控件：

providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TinyMceComponent),
    multi: true
  }
]

记得提前导入forwardRef和NG_VALUE_ACCESSOR哦。

接下来要处理编辑器的初始化、内容同步和销毁逻辑：

• 在组件的ngAfterViewInit钩子中初始化TinyMCE，把初始值（来自writeValue的参数）设置到编辑器
• 监听编辑器的input事件，当内容变化时调用之前注册的onChange回调，把新值通知给表单
• 在组件的ngOnDestroy钩子中销毁TinyMCE实例，避免内存泄漏
• 处理禁用状态：在setDisabledState方法里调用TinyMCE的API设置编辑器的禁用状态

改造完成后，你就可以像使用普通表单控件一样在NgForm里用它了：

<form #myForm="ngForm">
  <app-tiny-mce name="content" [(ngModel)]="formData.content" required></app-tiny-mce>
  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>

下面是一个完整的改造后组件的代码示例，你可以参考调整：

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

declare var tinymce: any;

@Component({
  selector: 'app-tiny-mce',
  template: `<textarea #editor id="{{editorId}}"></textarea>`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TinyMceComponent),
      multi: true
    }
  ]
})
export class TinyMceComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
  @Input() editorId = 'tiny-mce-editor';
  private editor: any;
  private onChange: (value: string) => void = () => {};
  private onTouched: () => void = () => {};
  private isDisabled = false;

  ngAfterViewInit() {
    tinymce.init({
      selector: `#${this.editorId}`,
      height: 300,
      plugins: 'advlist autolink lists link image charmap print preview anchor',
      toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
      setup: (editor: any) => {
        this.editor = editor;
        // 监听内容变化，通知表单
        editor.on('input', () => {
          const content = editor.getContent();
          this.onChange(content);
          this.onTouched();
        });
        // 设置初始禁用状态
        editor.setMode(this.isDisabled ? 'readonly' : 'design');
      }
    });
  }

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

  writeValue(value: string): void {
    if (this.editor && value !== undefined) {
      this.editor.setContent(value || '');
    }
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
    if (this.editor) {
      this.editor.setMode(isDisabled ? 'readonly' : 'design');
    }
  }
}

• 确保你已经正确引入了TinyMCE的脚本（比如在index.html里引入CDN或者本地脚本）
• Angular 4的ControlValueAccessorAPI和后续版本兼容，不用担心版本适配问题
• 测试时可以在表单提交时打印myForm.value，确认编辑器内容已经正确同步到表单对象中

内容的提问来源于stack exchange，提问作者Arsiwaldi