基本工具栏按钮-TinyMCE 中文手册-果果开发

基本按钮在点击时触发其 onAction 函数。

选项

名称	值	要求	描述
text	string	可选	当未找到图标时显示的文本。
icon	string	可选	要显示的图标名称。必须对应于以下图标之一：在图标包、自定义图标包中，或通过 `addIcon` API 添加的图标。
tooltip	string	可选	按钮工具提示的文本。
enabled	boolean	可选	默认值：`true` - 表示按钮的状态。当为 `false` 时，按钮不可点击。可通过按钮的 API 切换。
onSetup	`(api) => (api) => void`	可选	默认值：`() => () => {}` - 在按钮渲染时调用的函数。有关详细信息，请参阅：使用 `onSetup`。
onAction	`(api) => void`	必需	在按钮被点击时调用的函数。
shortcut	string	可选	显示在工具提示中的快捷方式。要注册快捷方式，请参阅：向 TinyMCE 添加自定义快捷方式。
context	string	可选	默认值：`mode:design` - context 属性根据编辑器的当前状态动态启用或禁用按钮。有关详细信息，请参阅：上下文。

API

名称	值	描述
isEnabled	`() => boolean`	检查按钮是否已启用。
setEnabled	`(state: boolean) => void`	设置按钮的启用状态。
setText	`(text: string) => void`	设置要显示的文本标签。
setIcon	`(icon: string) => void`	设置按钮的图标。

基本按钮示例及说明

以下示例向工具栏添加了两个按钮：

HTML

<textarea id="custom-toolbar-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;">欢迎使用 TinyMCE 编辑器演示！</h2>
  <p>从上面的列表框中选择一个菜单项，它将在光标位置插入内容到编辑器中。</p>

  <h2>有问题或需要帮助？</h2>
  <ul>
    <li>我们的 <a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a> 是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？请尝试在 Stack Overflow 的 <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> 标签</a> 下提问。</li>
    <li>我们还提供企业级支持作为 <a href="https://www.tiny.cloud/pricing">TinyMCE 高级计划</a> 的一部分。</li>
  </ul>

  <h2>发现 bug？</h2>
  <p>如果您认为自己发现了 bug，请在 <a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a> 上创建一个 issue 以向开发人员报告。</p>

  <h2>最后……</h2>
  <p>需要在您的应用程序中进行文件上传？考虑使用 <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> 与 TinyMCE 配合使用，以获得快速、现代的上传体验。</p>
  <p>感谢您支持 TinyMCE！我们希望它能帮助您和您的用户创建出色的内容。
    <br>来自 TinyMCE 团队的最诚挚问候。</p>
</textarea>

tinymce.init({
  selector: 'textarea#custom-toolbar-button',
  toolbar: 'customInsertButton customDateButton',
  setup: (editor) => {

    editor.ui.registry.addButton('customInsertButton', {
      text: '我的按钮',
      onAction: (_) => editor.insertContent(`&nbsp;<strong>这是我的按钮！</strong>&nbsp;`)
    });

    const toTimeHtml = (date) => `<time datetime="${date.toString()}">${date.toDateString()}</time>`;

    editor.ui.registry.addButton('customDateButton', {
      icon: 'insert-time',
      tooltip: '插入当前日期',
      enabled: false,
      onAction: (_) => editor.insertContent(toTimeHtml(new Date())),
      onSetup: (buttonApi) => {
        const editorEventCallback = (eventApi) => {
          buttonApi.setEnabled(eventApi.element.nodeName.toLowerCase() !== 'time');
        };
        editor.on('NodeChange', editorEventCallback);

        /* onSetup 应始终返回解绑处理函数 */
        return () => editor.off('NodeChange', editorEventCallback);
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

第一个按钮点击后，会把“It’s my button!”插入编辑器。第二个按钮是一个onSetup用法示例。该按钮使用toTimeHtml()辅助函数，向编辑器插入一个包含当前日期的 time 元素。该函数是 TinyMCE 的 insertdatetime 插件的简化版本。

本示例使用了 insertdatetime 插件中的一个图标，用于演示如何使用已注册的图标。将 disabled 设置为 true，以便按钮在首次渲染时处于禁用状态。

使用 onSetup 监听编辑器的 NodeChange 事件，当光标位于 time 元素（或“节点”）内部时禁用该按钮。这样可以确保无法将 time 元素插入到另一个 time 元素中。

使用 `onSetup`

onSetup 接收一个函数，该函数接收组件的 API。此函数应返回一个回调，该回调在接收组件的 API 后不返回任何内容。这是因为 onSetup 会在组件每次渲染时运行，而由 onSetup 返回的回调会在组件销毁时执行。从 onSetup 返回的函数本质上是一个 onTeardown 处理函数，可用于解除事件与回调的绑定。

为便于说明，代码中 onSetup 可能如下所示：

onSetup: (api) => {
  // Runs when the component is created
  // Configure the component or bind event listeners

  return (api) => {
    // Runs when the component is destroyed
    // Unbind event listeners or clean up resources
  };
};

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

传递给 editor.off() 的回调函数应与传递给 editor.on() 的函数相同。例如，如果在创建按钮时将一个 editorEventCallback 函数绑定到 NodeChange 事件，onSetup 应返回 (api) => editor.off('NodeChange', editorEventCallback)。
如果 onSetup 未注册任何事件监听器，或仅监听 init 事件，则 onSetup 可以返回一个空函数，例如 return () => {};。

基本工具栏按钮

选项

API

基本按钮示例及说明

使用 onSetup

使用 `onSetup`