Question

有没有办法将自定义动态元素添加到tinyMCE 4.x的上下文菜单中， 在init 之后？我创建了自定义菜单项，但其中许多都有子项，这些子项依赖于我的应用程序中正在进行的其他操作。

我尝试使用editor.on('contextmenu')，但菜单仍然没有更新。有什么想法吗？

Answer 1

添加contextmenu插件
通过定义contextmenu选项覆盖默认上下文菜单（某些插件会自动添加自己的条目）。它是一个以管道分隔的自定义菜单项列表（您在步骤3中定义）
定义自定义菜单项的列表。这些可以有自己的onclick事件处理程序，或定义子菜单。

tinymce.init({
    ...
    plugins: [..., 'contextmenu'],
    contextmenu: 'customItem1 | customItem2',
    setup: function (editor) {
        editor.addMenuItem('customItem1', {
            text: 'Menu Item 1',
            context: 'tools',
            onclick: function () {
                alert('Menu item 1 clicked');
            }
        });
        editor.addMenuItem('customItem2', {
            text: 'Menu Item 2',
            context: 'tools',
            menu: [ {
                text: "Sub-menu item 1",
                onclick: function () {
                    alert('Sub-menu item 1');
                }
            }, {
                text: "Sub-menu item 2",
                onclick: function () {
                    alert('Sub-menu item 2');
                }
            }]
        });
    }
});

参考文献：

Answer 2

是的，有可能。 JavaScript对象函数可用于在编辑器事件内部动态声明值。即使您可以循环使用，但“动态”中仅支持一个菜单（因为“上下文菜单”的值是唯一的），请创建虚拟上下文菜单并单独声明（应用您自己的逻辑）。

在子菜单上：要创建动态菜单，请使用数组，并通过JavaScript对象方法将其推送到循环中以动态显示。

供参考：Dynamic data added in custom TinyMCE Editor using AngularJs

Answer 3

我就是这样做的我使用 jQuery $.each 来遍历我的对象，你也可以使用 vanilla JavaScript

//register plugin to process context menu on a specific tag
tinymce.PluginManager.add('contextmenu-plugin', function (editor) {
  var selectedCode
  // Create a function which returns an array of items, these can be Submenus or Simple Items
  var contextMenuItems = () => { 
    return [
    {
      type: 'submenu',
      text: "Submenu 1",
      getSubmenuItems: () => {
        if (selectedCode){
          var contextMenuItems = []
          $.each( ArrayWithData, (index, data ) => {
            contextMenuItems.push({
              type: 'item',
              text: `${data}`,
              onAction: () => {
                console.log("Clicked submenu option");
              }
            })
          })
          // return array of contextmenuitems -> this goes to the Submenu
          return contextMenuItems
        }
       }
      },
      {  
       icon: 'remove',
       text: 'Remove data',
       onAction: () => {
         console.log(`Removed data`)
       }
      }
      }
      ]
      }

// now register the contextmenu
editor.ui.registry.addContextMenu('contextmenu', {
  update: function (element) {
    //this way you can call contextMenuItems() every time you show the context menu
    return (element.tagName == "your-condition" && element.className.includes("another condition") ) ? contextMenuItems() : ""
        }
      });
    });

如何向tinyMCE添加动态上下文菜单？

3 个答案: