angular2 wysiwyg tinymce implementation and 2-way-binding

Question

Hi I\'m trying to implement tinymce into an angular 2 component for a small forum to create a new thread. I want the content of the textarea (tinymce) be 2-way-binded to a v

Answer 1

I wanted to say I did the same implementation as stated above, but I came across this weird error and banged my head around and around fixing this error of 'cannot modify NodeName of Null', so finally today I fixed the error and I wanted to share it, so people won't have to search it anymore what the error might be. I know this is an old post my apologies for that.

1. get the code of github (directive). link below. thankyou @Abhijith Nagaraja for the post.

https://github.com/Abhijith-Nagaraja/tinymce-docs/blob/master/integrations/angular2.md#sample-directive-implementation-with-ngmodel-two-way-binding

2. add two variables to the directive

private editor;
private init: boolean = false;

rewrite the method

writeValue(value: any): void {
    // ...
} 

to

writeValue(value: any): void {
    // This check is necessary because, this method gets called before editor gets initialised.
    // Hence undefined/null pointer exceptions gets thrown
    if (this.init) {
      if (tinymce.get(this.selector)) {
         tinymce.get(this.selector).setContent(value, {format: 'raw'});
      }
   }
}

replace in ValueOnChange(change: boolean) this.val = tinymce.activeEditor.getContent();

to

if (tinymce.activeEditor) {         
    this.val = tinymce.activeEditor.getContent();
}

rewrite tinymce.init(options)

to

tinymce.init(options).then(() => {
    this.init = true;
});

and last add a ngOnDestroy method

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

This has fixed the error for me and also fixed for me when the editor was already initialized and I had reuse it, it wouldn't compile. but now because of the ngOnDestroy I now can destroy the editor and the afterViewInit will recall the tinymce.init