Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

185
Views
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

10 months ago · Santiago Trujillo
1 answers
Answer question

0

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

10 months ago · Santiago Trujillo Report
Answer question
Find remote jobs