Angular 2：更新 TinyMCE 文本区域中的文本后模型不会立即更新答案

【问题标题】：Angular 2: model doesn't update immediately after updating text in a TinyMCE textareaAngular 2：更新 TinyMCE 文本区域中的文本后模型不会立即更新
【发布时间】：2017-12-14 19:10:24
【问题描述】：

如果我有一个像这样的常规文本区域：

<textarea [(ngModel)]="model.body" name="body" id="body"></textarea>

当我在文本区域中输入时，页面上的以下内容会实时更新文本：

{{model.body}} // <-- updates in real time

但是，如果我将 TinyMCE 附加到同一个文本区域：

// WYSIWYG for body field
tinymce.init({
    selector: '#body',
    plugins: ['link'],
    skin_url: 'assets/skins/lightgray',
    menubar: false,
    statusbar: false,
    toolbar: 'bold italic underline link',
    setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
            const content = editor.getContent();
            this.onEditorKeyup.emit(content);
            this.model.body = content;
        });
    }
});

然后{{model.body}} 不再实时更新，而是我必须单击页面上的其他表单字段之一，例如：

<input matInput required [(ngModel)]="model.title" name="title">

点击{{model.body}} 后，TinyMCE 中的内容就会更新。有什么办法解决这个问题？

【问题讨论】：

您可以在设置body 内容后强制检测角度变化，例如调用ApplicationRef.tick()，如this answer 所示。

标签： javascript angular tinymce

【解决方案1】：

我认为问题在于editor.on(...) 方法绑定在角度的zone 之外，因此它不知道何时进行了更改。所以你必须“唤醒”zone，例如使用 ChangeDetectorRef 和方法 detectChanges()

constructor(
   private cdr: ChangeDetectorRef,
   ... // other dependencies
) { }

// other declarations for TinyMCE
setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
            const content = editor.getContent();
            this.onEditorKeyup.emit(content);
            this.model.body = content;
            this.cdr.detectChanges();
        });

【讨论】：