TinyMCE 4：如何通过下拉菜单在光标处插入文本片段？

完全懂你的需求！Template插件确实有点冗余，咱们直接用TinyMCE原生的API就能实现一个简洁的下拉菜单，不管是放在工具栏还是顶部菜单里都可以，没有多余的弹窗或预览功能，完全贴合你的要求。

一、工具栏下拉按钮实现 #

这种方式会在工具栏生成一个带下拉列表的按钮，选中选项后直接插入文本到光标位置：

tinymce.init({
  selector: '#your-textarea-id',
  // 把自定义按钮加入工具栏
  toolbar: 'customTextDropdown',
  setup: function(editor) {
    // 注册自定义下拉按钮
    editor.ui.addButton('customTextDropdown', {
      text: '插入预设文本', // 工具栏按钮显示的文字
      type: 'listbox', // 指定类型为下拉列表
      // 下拉选项：text是显示文字，value是要插入的内容（支持HTML格式）
      values: [
        { text: '问候语', value: '你好！欢迎使用本编辑器😊' },
        { text: '提示文本', value: '<strong>注意：</strong>请填写真实有效的信息' },
        { text: '签名', value: '---<br>技术支持团队' }
      ],
      // 选中选项时触发的事件
      onselect: function() {
        // 将选中的内容插入到光标位置
        editor.insertContent(this.value());
      }
    });
  }
});

说明： #

• values数组可以根据你的需求自由扩展，value字段支持HTML格式，能插入带样式的内容
• 如果预设内容很多，可以把values抽成单独的变量，方便后期维护
• 完全不需要依赖任何额外插件，原生API就能实现

二、顶部菜单选项实现 #

如果想把这个功能加到编辑器顶部的菜单（比如“插入”菜单）里，也很简单：

tinymce.init({
  selector: '#your-textarea-id',
  setup: function(editor) {
    // 注册一个自定义子菜单
    editor.addMenuItem('customTextMenu', {
      text: '插入预设文本', // 菜单显示的名称
      // 子菜单选项
      menu: [
        {
          text: '问候语',
          onclick: function() {
            editor.insertContent('你好！欢迎使用本编辑器😊');
          }
        },
        {
          text: '提示文本',
          onclick: function() {
            editor.insertContent('<strong>注意：</strong>请填写真实有效的信息');
          }
        },
        {
          text: '签名',
          onclick: function() {
            editor.insertContent('---<br>技术支持团队');
          }
        }
      ]
    });

    // 将自定义子菜单加入到默认的「插入」菜单中
    editor.addMenuItem('insert', {
      menu: 'customTextMenu'
    });
  }
});

小技巧： #

如果需要动态加载下拉选项（比如从后端获取预设文本），可以在setup函数里通过异步请求拿到数据后，再更新下拉按钮的values或者菜单的子项，比如：

// 示例：异步加载选项
fetch('/api/get-presets')
  .then(res => res.json())
  .then(presets => {
    const menuItems = presets.map(item => ({
      text: item.name,
      onclick: () => editor.insertContent(item.content)
    }));
    // 更新菜单
    editor.menuItems['customTextMenu'].menu = menuItems;
  });

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