javascript - Angular 2 : model doesn't update immediately after updating text in a TinyMCE textarea

Question

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

<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内的内容。有办法解决这个问题吗？

Answer 1

我认为问题在于 editor.on(...) 方法绑定(bind)在 Angular 的 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();
        });