如何在Angular TinyMCE编辑器中添加自定义按钮

问题修正与实现步骤 #

你当前的代码存在两处关键问题：一是TS里的OnInit写法不符合TinyMCE的自定义按钮注册逻辑，二是未将注册好的按钮添加到工具栏配置中。以下是完整的解决方法：

1. 调整组件TS文件 #

在组件类中定义TinyMCE的完整初始化配置，通过setup回调注册自定义按钮，并实现点击插入表单元素的逻辑：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  myForm: FormGroup;

  tinymceConfig = {
    apiKey: '2zr2n................................g26r3pdhfruj',
    plugins: 'advlist autolink link image lists',
    toolbar: 'paste undo redo add-form-element', // 把自定义按钮ID加到工具栏
    setup: (editor) => {
      // 注册自定义按钮
      editor.ui.registry.addButton('add-form-element', {
        text: '添加表单元素',
        icon: false,
        onclick: () => {
          // 插入文本输入框示例，可扩展其他表单元素
          editor.insertContent(`
            <div style="margin:10px 0;">
              <label>用户姓名:</label>
              <input type="text" name="username" style="padding:4px; margin-left:8px;" />
            </div>
          `);
          // 如需添加下拉框，可替换为以下代码
          // editor.insertContent(`
          //   <div style="margin:10px 0;">
          //     <label>用户性别:</label>
          //     <select name="gender" style="padding:4px; margin-left:8px;">
          //       <option value="male">男</option>
          //       <option value="female">女</option>
          //     </select>
          //   </div>
          // `);
        }
      });
    }
  };

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      body: ['']
    });
  }
}

2. 更新模板文件 #

将模板中的[init]绑定到我们定义好的配置变量：

<form [formGroup]="myForm">
  <editor
    formControlName="body"
    [init]="tinymceConfig"
  ></editor>
</form>

核心说明 #

• setup是TinyMCE的初始化钩子，编辑器启动时会执行该函数，用于注册自定义UI组件。
• 工具栏配置中的按钮ID必须和addButton的第一个参数完全一致，否则按钮不会显示在工具栏上。
• 使用editor.insertContent()可以直接向编辑器插入任意HTML代码，你可以根据需求扩展更多表单元素（如复选框、文本域等）。

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