自定义切换菜单项

切换菜单项在点击时触发其 onAction。它还具有状态的概念。这意味着它可以被切换为 on 和 off。切换菜单项通过在其处于 on 状态时在菜单项文本右侧显示的勾选标记向用户提供视觉反馈。

选项

API

示例：创建一个切换菜单项

// 菜单项在菜单关闭和打开时会重新创建，因此我们需要
// 一个变量来存储切换菜单项的状态。
let toggleState = false;

tinymce.init({
  selector: 'textarea',
  menu: {
    custom: { title: 'Custom Menu', items: 'undo redo toggleitem' }
  },
  menubar: 'file edit custom',
  setup: (editor) => {
    editor.ui.registry.addToggleMenuItem('toggleitem', {
      text: 'My toggle menu item',
      icon: 'home',
      onAction: () => {
        toggleState = !toggleState;
        alert('Toggle menu item clicked');
      },
      onSetup: (api) => {
        api.setActive(toggleState);
        return () => {};
      }
    });
  }
});

使用 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 () => {};。