CODEWITHSUNDEEP
ckeditorangular
elzoy
elzoy

Reputation: 5435

Angular2 + CKEditor - observing changes

There is no problem with observing changes but with connecting it with [(ngModel)].

Code:

import {Component} from 'angular2/core'

@Component({
  selector: 'main',
  template: `

  <textarea [(ngModel)]="comment" name="editor1" id="editor1"></textarea>
  <div *ngIf="comment">
    {{comment}}
  </div>
  `
})

export class MainComponent {

  ngOnInit(){
     //this.editor = window['CKEDITOR']['replace']( 'editor1' );
     window['CKEDITOR']['replace']( 'editor1' )['on']('change', function( evt ) {
       this.comment = evt.editor.getData();
       console.log( 'comment = ' + this.comment );
     })
  }

  comment: any = "default";
}

So, default when the page load

  <div *ngIf="comment">
    {{comment}}
  </div>

Angular2 prints "default" text - correct. The problem is when I edit the text in ckeditor. Then there is still "default" text, but in console thanks to:

console.log( 'comment = ' + this.comment );

the text is viewing properly. So what's the problem? Why {{comment}} see only the start version of "comment" variable? How to fix it? Thank you for your help.

Upvotes: 2

Views: 917

Answers (1)

Michael Desigaud
Michael Desigaud

Reputation: 2135

try to run it inside a zone:

export class MainComponent {
  constructor(private zone:NgZone){}
  ngOnInit(){
     //this.editor = window['CKEDITOR']['replace']( 'editor1' );
     window['CKEDITOR']['replace']( 'editor1' )['on']('change', function( evt ) {
       this.zone.run(function(){
         this.comment = evt.editor.getData();
         console.log( 'comment = ' + this.comment );
       });

     })
  }

  comment: any = "default";
}

Upvotes: 2

Related Questions