组工具栏按钮是一个工具栏按钮，其中包含一系列其他工具栏按钮，点击时会以弹出式菜单显示这些按钮。所显示工具栏的风格取决于当前的工具栏模式。例如，如果将toolbar_mode设置为floating，则工具栏组弹出菜单将以浮动货架的形式出现。

组工具栏按钮仅在使用floating工具栏模式时受支持。如果在其他工具栏模式下使用toolbar_groups选项，则工具栏组按钮将不会显示，并且会在控制台中打印警告消息。

选项

名称值要求描述

text

string

可选

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

icon

string

可选

要显示的图标的名称。必须与以下图标之一对应：图标包、自定义图标包中的图标，或使用addIcon API添加的图标。

tooltip

string

可选

按钮工具提示的文本。

items

string 或 LabelledToolbar[]

必需

以空格分隔的工具栏按钮名称字符串，或带标签的工具栏按钮数组。

onSetup

(api) => (api) => void

可选

默认值：() => () => {} - 渲染按钮时调用的函数。有关详细信息，请参阅：使用onSetup。

context

string

可选

默认值：mode:design - 上下文属性根据编辑器的当前状态动态启用或禁用按钮。有关详细信息，请参阅：上下文。

API

名称值描述

isEnabled

() => boolean

检查按钮是否已启用。

setEnabled

(state: boolean) => void

设置按钮的启用状态。

setText

(text: string) => void

设置要显示的文本标签。

setIcon

(icon: string) => void

设置按钮的图标。

组工具栏按钮示例及说明

以下是一个简单的组工具栏按钮示例：

HTML

<textarea id="custom-toolbar-group-button">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
  <p>Select a menu item from the listbox above and it will insert contents into the editor at the caret position.</p>

  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/8/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>Found a bug?</h2>
  <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally ...</h2>
  <p>Need file uploads in your app? Consider using <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> with TinyMCE for a fast, modern upload experience.</p>
  <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
    <br>All the best from the TinyMCE team.</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#custom-toolbar-group-button',
  height: 500,
  toolbar_mode: 'floating',
  toolbar: 'alignment',
  setup: (editor) => {

    /* example, adding a group toolbar button */
    editor.ui.registry.addGroupToolbarButton('alignment', {
      icon: 'align-left',
      tooltip: 'Alignment',
      items: 'alignleft aligncenter alignright | alignjustify'
    });

  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

上面的示例配置了一个自定义的对齐方式组工具栏按钮。点击该按钮时，会显示一个浮动货架，其中包含左对齐、居中、右对齐和两端对齐的工具栏按钮。

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