TinyMCE keyup enter key to call function in component

Question

I am using Angular 8 and TinyMCE v5. I have a custom component component that includes the tinymce editor with config properties associated.

<tinymce #editor [config]="context.config" [(ngModel)]="context.message">

I also have a button that has a callback function when clicked. As normal, after I type into the text editor, I use the button to call a function which captures the editor content. However, I want to also to allow the same function to be called when the enter key is pressed in the editor based on a condition. How can I accomplish this?

The problem I am running into is that I cannot access the component function from the config properties where I can specify in the setup.

Let me know if I need to include more information. Thanks!

Tiny Lincoln Tiny Lincoln · Accepted Answer · 2019-10-08T21:53:25

If you use the Official TinyMCE Angular component, you can bind editor events via a shorthand prop on the editor component, for example:

<editor (onKeyUp)="handleEvent($event)"></editor>

https://github.com/tinymce/tinymce-angular#event-binding

This way, you can bind to the editor event from outside of the editor configuration properties.

TinyMCE keyup enter key to call function in component

1 Answers