Geek Answers Handbook

Angular2 wysiwyg tinymce implementation and two way binding

Hi, I am trying to implement tinymce in angular 2 component for a small forum in order to create a new thread. I want the contents of textarea (tinymce) to be bound to two variables inside the component. So far, the submit button works, but the keyup event does not work.
export class ForumNewThreadComponent implements OnInit{ constructor(){} ngOnInit():any { tinymce.init( { selector: ".tinyMCE", }) } text:string; submit(){ this.text = tinymce.activeEditor.getContent(); } getTinymceContent(){ this.text = tinymce.activeEditor.getContent(); } }

and browse

 <div class="thread-body"> {{getValue}} <textarea class="tinyMCE" style="height:300px" (keyup)="getTinymceContent()"> </textarea> <button class="btn btn-primary" (click)="submit()">Submit</button> </div>
+6
source share
4 answers

I would use a special accessory for this:

 const TINY_MCE_VALUE_ACCESSOR = new Provider( NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TinyMceValueAccessor), multi: true}); @Directive({ selector: 'textarea[tinymce]', host: { '(keyup)': 'doOnChange($event.target)' }, providers: [ TINY_MCE_VALUE_ACCESSOR ] }) export class DateValueAccessor extends DefaultValueAccessor { @Input() tinymce:any; onChange = (_) => {}; onTouched = () => {}; writeValue(value:any):void { if (value!=null) { super.writeValue(value.toString()); } } doOnChange(elt) { this.onChange(this.tinymce.activeEditor.getContent()); } }

I would use it like this:

 <textarea [tinymce]="tinymce" style="height:300px" [(ngModel)]="text"> </textarea>

and in your component class:

 @Component({ (...) directives: [ DateValueAccessor ] }) export class ForumNewThreadComponent implements OnInit{ constructor(){} ngOnInit():any { tinymce.init({ selector: "[tinymce]" }) } text:string; }
+4
source

Or do it like this using the tmce and NgZone change event

 constructor(public zone:NgZone) {} ngOnInit():any { tinymce.init( { selector: ".tinyMCE", setup: (ed) => { ed.on('keyup change', (ed, l) => { this.zone.run(()=> { this.text = tinymce.activeEditor.getContent(); }); }); } }) }

This will crash if you have multiple instances for tmce in the same component. Put this logic in a directive such as a Thierry implementation.

+2
source

I wanted to say that I did the same implementation as above, but I ran into this strange error and hit my head around and fixed this error 'cannot modify NodeName of Null' , so finally I fixed the error today and I wanted to to share it, so people don’t have to look for it anymore, which could be a mistake. I know this is an old post apologizing for this.

  • get the github code (directive). link below. thanks @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 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 the last add the ngOnDestroy method

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

This fixed a bug for me and also fixed for me when the editor was already initialized and I reused it, it will not compile. but now because of ngOnDestroy I can now destroy the editor, and afterViewInit will remember tinymce.init

+2
source

I know this is a little old post. But after scratching the head for more than 2 days. Finally, I was able to understand this and thought it might be useful to others. So share it here.

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

0
source

More articles:


All Articles