嵌套菜单项是带有子菜单的菜单项。通过这种方式注册子菜单，可以使其在 menubar 菜单和 toolbar 按钮菜单中重复使用，而无需定义两次子菜单。子菜单可以包含基本菜单项和切换菜单项的任意组合。

名称值要求描述

text

string

可选

如果未找到图标，则显示的文本。

icon

string

可选

要显示的图标名称。必须对应于以下之一的图标：在icon pack、自定义 icon pack中，或通过addIcon API添加。

value

string

可选

要与菜单项关联的值。

onSetup

(api) => (api) => void

可选

默认值：() => () => {} - 当菜单项渲染时调用的函数，每次其菜单打开时都会调用。有关详细信息，请参阅：使用onSetup。

getSubmenuItems

() => string 或 MenuItem[]

必需

当菜单项被点击以打开其子菜单时调用的函数。必须返回已注册菜单名称的空格分隔字符串，或基本、切换或嵌套菜单项规范的数组。

shortcut

string

可选

要在快捷键标签中显示的文本。要注册快捷键，请参阅：为 TinyMCE 添加自定义快捷键。

context

string

可选

默认值：mode:design - context 属性根据编辑器的当前状态动态启用或禁用菜单项。有关详细信息，请参阅：Context。

API

名称值描述

isEnabled

() => boolean

检查菜单项是否启用。

setEnabled

(state: boolean) => void

设置菜单项的启用状态。

示例：创建嵌套菜单项

tinymce.init({
  selector: 'textarea',
  menu: {
    custom: { title: 'Custom Menu', items: 'undo redo nesteditem' }
  },
  menubar: 'file edit custom',
  setup: (editor) => {
    editor.ui.registry.addNestedMenuItem('nesteditem', {
      text: 'My nested menu item',
      getSubmenuItems: () => [{
        type: 'menuitem',
        text: 'My submenu item',
        onAction: () => alert('Submenu item clicked')
      }]
    });
  }
});

使用 onSetup

onSetup接受一个函数，该函数接收组件的 API。此函数应返回一个回调函数，该回调函数在接收到组件的 API 后不返回任何内容。这是因为onSetup在组件渲染时运行，而onSetup返回的回调函数在组件销毁时执行。从onSetup返回的函数实际上是一个onTeardown处理程序，可用于解绑事件和回调函数。

为了澄清，在代码中onSetup可能看起来像这样：

onSetup: (api) => {
  // 当组件创建时运行
  // 配置组件或绑定事件监听器

  return (api) => {
    // 当组件销毁时运行
    // 解绑事件监听器或清理资源
  };
};

要将回调函数绑定到编辑器事件，请使用editor.on(eventName, callback)。要解绑事件监听器，请使用editor.off(eventName, callback)。任何事件监听器都应在拆卸回调函数中解绑。唯一不需要解绑的编辑器事件是init，例如editor.on('init', callback)。

  • 传递给editor.off()的回调函数应该是传递给editor.on()的相同函数。例如，如果在按钮创建时将editorEventCallback函数绑定到NodeChange事件，则onSetup应返回(api) => editor.off('NodeChange', editorEventCallback)。

  • 如果onSetup没有注册任何事件监听器，或者只监听init事件，则onSetup可以返回一个空函数，例如return () => {};。