基本的菜单项在被点击时会触发其 onAction 函数。

选项

名称值要求描述

text

string

可选

当未找到图标时显示的文本。

icon

string

可选

要显示的图标名称。必须对应于 图标包、自定义图标包 中的图标，或者使用 addIcon API 添加的图标。

value

string

可选

与菜单项关联的值。

enabled

boolean

可选

默认值：true - 表示菜单项的状态。当为 false 时，菜单项不可点击。通过菜单项的 API 进行切换。

onSetup

(api) => (api) => void

可选

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

onAction

(api) => void

必需

函数，在点击菜单项时调用。

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 basicitem' }
  },
  menubar: 'file edit custom',

  setup: (editor) => {
    editor.ui.registry.addMenuItem('basicitem', {
      text: 'My basic menu item',
      onAction: () => alert('Menu 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 () => {};。