angulartinymcetinymce-plugins

Angular TinyMCE add custom plugin

I have an Angular application and I am using TinyMCE as my editor.
Is there any way I can add a custom plugin for the editor with angular? I haven't found any example online with angular.

What I am trying to achieve is to add a button to the toolbar which opens a custom-built angular component. I have added a simple TinyMCE editor example on stackblitz.

https://stackblitz.com/edit/angular-ivy-k3nguv?file=src%2Fapp%2Fapp.component.ts

Solution

  • You can define setup method in your component and refer to that method in editor configuration:

    ts

    setup(editor) {
  editor.ui.registry.addButton('myCustomToolbarButton', {
    text: 'My Custom Button',
    onAction: function () {
      alert('Button clicked!');
    }
  });
}

    html

    <editor
  [init]="{
    height: 500,
    menubar: false,
    plugins: ['paste'],
    toolbar: 'bold italic underline myCustomToolbarButton',
    setup: setup
  }"

    Forked Stackblitz