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

Question

If I have a regular textarea like so:

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

Having the following on the page updates the text in real time as I type in the textarea:

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

However if I have TinyMCE attached to the same textarea:

// 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;
        });
    }
});

Then {{model.body}} doesn't update in real time anymore, instead I have to click on one of the other form fields that are on the page like:

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

And once clicked {{model.body}} updates to what's inside TinyMCE. Any way to fix this?

You can force Angular change detection after setting the `body` content, for example by calling `ApplicationRef.tick()` as illustrated in [this answer](https://stackoverflow.com/a/47801027/1009922). — ConnorsFan, Dec 14 '17 at 19:17

score 3 · Accepted Answer · answered Dec 14 '17 at 19:23

I think the problem is that editor.on(...) method is binding outside zone of angular so it doesn't know when change have been made. So you have to "wake up" zone for example using ChangeDetectorRef with method 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();
        });

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

1 Answers1