如何向TinyMCE自定义工具栏的下拉列表动态添加选项？

我已在TinyMCE中创建了带值列表的自定义工具栏，点击外部按钮时需要向下拉列表动态添加值，但当前尝试的方法无效，新值并未出现在下拉列表中。

以下是我当前的代码：

<script src='http://cdn.tinymce.com/4/tinymce.min.js'></script>
<script>
 var tempGroups = ['Group1', 'Group2', 'Group3', 'Group4'];

 var tempGroupName;
 var menuItems = [];
 
 function addToGroup(e){
    console.log("sdfsf");
    e.preventDefault();
    tempGroups.push('Group 5');
 }

 function createTempMenu(editor) {
   for (i = 0; i < tempGroups.length; i++) {
     tempGroupName = tempGroups[i];
     menuItems[i] = {
       text: tempGroupName,
       menu: tempGroups
     };
   }
   return menuItems;
 }

  tinymce.init({
    selector: '#mytextarea',
    toolbar1: 'UseTemplates',
    setup: function(editor) {
     editor.addButton('UseTemplates', {
       type: 'menubutton',
       text: 'usetemplates',
       icon: false,
       menu: createTempMenu(editor)
     });
   }
  });
  </script>


<h1>Custom Properties for Toolbar Buttons and Menu items</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
    <button onclick="addToGroup(event)">Add to Group</button>
  </form>

可行实现方法 #

问题核心：你仅修改了tempGroups数组，但TinyMCE的菜单是初始化时生成的，不会自动监听数组变化。要更新菜单，需重新生成菜单配置并更新按钮的菜单实例。

修改后的完整代码如下：

<script src='http://cdn.tinymce.com/4/tinymce.min.js'></script>
<script>
 var tempGroups = ['Group1', 'Group2', 'Group3', 'Group4'];
 var tempMenuButton; // 保存工具栏按钮的引用

 function addToGroup(e){
    e.preventDefault();
    // 动态生成新组名，避免重复
    tempGroups.push('Group ' + (tempGroups.length + 1));
    // 重新生成菜单并更新按钮
    var newMenuItems = createTempMenu();
    tempMenuButton.menu = newMenuItems;
    tempMenuButton.renderMenu(); // 强制重新渲染菜单
 }

 function createTempMenu() {
   var menuItems = []; // 每次生成新数组，避免旧数据残留
   for (var i = 0; i < tempGroups.length; i++) {
     menuItems.push({
       text: tempGroups[i],
       // 添加点击事件示例：向编辑器插入选中的组名
       onclick: function() {
         tinymce.activeEditor.insertContent(`<p>${this.text}</p>`);
       }
     });
   }
   return menuItems;
 }

  tinymce.init({
    selector: '#mytextarea',
    toolbar1: 'UseTemplates',
    setup: function(editor) {
     // 保存按钮引用，方便后续更新
     tempMenuButton = editor.addButton('UseTemplates', {
       type: 'menubutton',
       text: 'usetemplates',
       icon: false,
       menu: createTempMenu()
     });
   }
  });
  </script>


<h1>自定义工具栏按钮与菜单项属性</h1>
  <form method="post">
    <textarea id="mytextarea">Hello, World!</textarea>
    <button onclick="addToGroup(event)">添加分组</button>
  </form>

关键修改说明 #

• 新增tempMenuButton变量保存工具栏按钮实例，为后续更新菜单提供入口
• 重构createTempMenu函数：每次生成全新的menuItems数组，避免旧数据干扰；同时修正原代码中menu: tempGroups的错误配置（原配置会将数组直接作为子菜单导致显示异常，改为添加实用的点击插入事件示例）
• 在addToGroup函数中，更新数组后重新生成菜单配置，赋值给按钮的menu属性，再调用renderMenu()方法强制菜单重新渲染

完成上述修改后，点击"添加分组"按钮，下拉菜单就会动态新增选项了。

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