如何在Angular5中添加自定义工具栏？参考TinyMCE官方示例

当然可以在Angular 5中给TinyMCE添加自定义工具栏！我来一步步带你实现，完全适配你的需求：

1. 配置编辑器初始化参数 #

在你的Angular组件类中，定义TinyMCE的配置对象，核心是通过setup函数注册自定义按钮，并把按钮名称加入toolbar列表：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tiny-editor',
  templateUrl: './tiny-editor.component.html',
  styleUrls: ['./tiny-editor.component.css']
})
export class TinyEditorComponent {
  // TinyMCE编辑器配置
  editorConfig = {
    // 工具栏配置：把自定义按钮"customBtn"加入到工具栏序列中
    toolbar: 'undo redo | bold italic | customBtn',
    setup: (editor) => {
      // 注册自定义工具栏按钮
      editor.ui.registry.addButton('customBtn', {
        text: '我的自定义按钮', // 按钮显示文本
        icon: false, // 不需要内置图标就设为false，也可以填TinyMCE内置图标名
        // 按钮点击触发的逻辑
        onAction: () => {
          // 示例：插入自定义内容到编辑器
          editor.insertContent('<p>这是自定义按钮插入的内容！</p>');
          // 你也可以在这里调用服务、弹出对话框或执行其他业务逻辑
        }
      });
    }
  };
}

2. 在模板中绑定编辑器配置 #

在组件的HTML模板里，将TinyMCE编辑器组件和刚才定义的配置绑定：

<!-- 假设你已经引入了TinyMCE的Angular编辑器组件 -->
<editor [init]="editorConfig"></editor>

3. 进阶：实现复杂自定义控件 #

如果需要更复杂的工具栏元素（比如下拉菜单、拆分按钮），可以用TinyMCE提供的addSplitButton或addMenuItem方法：

示例：自定义拆分按钮 #

setup: (editor) => {
  editor.ui.registry.addSplitButton('customSplitBtn', {
    text: '自定义下拉',
    icon: 'align-left', // 使用内置图标
    // 按钮主区域的点击动作
    onAction: () => {
      editor.insertContent('<p>执行默认动作！</p>');
    },
    // 下拉选项的点击动作
    onItemAction: (api, value) => {
      editor.insertContent(`<p>你选择了：${value}</p>`);
      api.hideMenu(); // 点击选项后关闭菜单
    },
    // 加载下拉选项列表
    fetch: (callback) => {
      const menuItems = [
        { type: 'menuitem', text: '选项1', value: 'option1' },
        { type: 'menuitem', text: '选项2', value: 'option2' }
      ];
      callback(menuItems);
    }
  });
}

记得把customSplitBtn添加到toolbar数组中，就能在工具栏看到这个拆分按钮了。

注意事项 #

• 确保你已正确安装适配Angular 5的TinyMCE组件：Angular 5版本较旧，建议使用@tinymce/tinymce-angular的3.x系列版本（可通过npm install @tinymce/tinymce-angular@3安装）
• 自定义图标可以使用TinyMCE内置图标库的名称，也可以通过自定义CSS来添加自定义图标
• 如果需要和Angular服务交互，直接在onAction回调中调用组件内的服务即可

内容的提问来源于stack exchange，提问作者Xyrin Technologies