Angular TinyMCE 添加自定义插件

【问题标题】：Angular TinyMCE add custom pluginAngular TinyMCE 添加自定义插件
【发布时间】：2022-01-11 11:45:30
【问题描述】：

我有一个Angular 应用程序，我使用TinyMCE 作为我的编辑器。
有什么办法可以为带有角度的编辑器添加自定义插件？我没有在网上找到任何有角度的例子。

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：