Angular TinyMCE 添加自定义插件

Question

我有一个 Angular 应用程序，我正在使用 TinyMCE 作为我的编辑器。
有什么方法可以使用 angular 为编辑器添加自定义插件吗？我还没有在网上找到 angular.

的任何示例

我想要实现的是在工具栏上添加一个按钮，该按钮可以打开一个定制的 angular 组件。我在 stackblitz 上添加了一个简单的 TinyMCE 编辑器示例。

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

Answer 1

您可以在组件中定义设置方法并在编辑器配置中引用该方法：

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

Angular TinyMCE 添加自定义插件

Angular TinyMCE add custom plugin

tinymce

tinymce-plugins

angular