帮助

帮助插件会添加一个按钮和/或菜单项，用于打开一个包含四个标签页的对话框：

也可以通过按下键盘快捷键来显示 TinyMCE 帮助对话框。

从 TinyMCE 6.7 开始，打开 TinyMCE 帮助对话框的键盘快捷键默认会在 TinyMCE 状态栏中显示。

基本设置

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配你的 HTML
  plugins: 'help',
  toolbar: 'help'
});

有关使用模块打包工具将此插件打包的信息，请参阅 打包 TinyMCE - 概述。

选项

help_accessibility

当 Help 插件加载后，TinyMCE 编辑器默认会在 TinyMCE 状态栏中显示用于访问帮助对话框的键盘快捷键。

help_accessibility 选项允许关闭此显示。

类型：Boolean

默认值：true

可能的值：true，false

示例：关闭 help_accessibility

tinymce.init({
  selector: "textarea",  // 根据需要修改此值以匹配你的 HTML
  plugins: "help",
  help_accessibility: false,
});

示例：显式开启 help_accessibility

当 Help 插件加载时，help_accessibility 选项默认为 true。

虽然没有必要，但将该选项显式设置为 true 可能是有用的。

tinymce.init({
  selector: "textarea",  // 根据需要修改此值以匹配你的 HTML
  plugins: "help",
  help_accessibility: true,
});

help_tabs

此选项允许你指定帮助对话框应显示哪些标签页，以及显示顺序。默认的 TinyMCE 标签页名为 shortcuts、keyboardnav、plugins 和 versions。可以通过提供具有相同 name 的新 标签面板 规范来覆盖这些标签页，并且可以通过注册具有新 name 的标签面板来添加新标签页。新标签页可以在 help_tabs 配置中注册，或者在初始化时或运行时使用 addTab API 方法注册。

如果配置了 help_tabs，则只会显示在 help_tabs 中命名的标签页。任何使用 addTab 定义但未在 help_tabs 中命名的标签页都将被忽略。

如果未配置 help_tabs，则任何使用 addTab 定义的标签页都将显示在默认标签页之后。

类型：Array

默认值：[ 'shortcuts', 'keyboardnav', 'plugins', 'versions' ]

示例：使用 help_tabs

tinymce.init({
  selector: 'textarea',
  plugins: 'help link table code emoticons',
  toolbar: 'help addTab',
  help_tabs: [
    'shortcuts', // 默认的快捷键标签页
    'keyboardnav', // 默认的键盘导航标签页
    'plugins', // 默认的插件标签页
    {
      name: 'custom1', // 名为 custom1 的新标签页
      title: 'Custom Tab 1',
      items: [
        {
          type: 'htmlpanel',
          html: '<p>This is a custom tab</p>',
        }
      ]
    },
    {
      name: 'versions', // 覆盖默认的 versions 标签页
      title: 'Custom Versions',
      items: [
        {
          type: 'htmlpanel',
          html: 'This is a custom versions panel.'
        }
      ]
    },
    'custom2', // 在下方 setup() 中初始化时定义的新标签页 custom2
    'custom3' // 在下方 setup() 中按钮点击时定义的新标签页 custom3
  ],
  setup: (editor) => {
    // 编辑器初始化时，添加名为 custom2 的标签页
    editor.on('init', () => {
      editor.plugins.help.addTab({
        name: 'custom2',
        title: 'Custom Tab 2',
        items: [
          {
            type: 'htmlpanel',
            html: '<p>This is another custom tab</p>',
          }
        ]}
      );
    });

    // 添加一个工具栏按钮，点击时添加名为 custom3 的标签页
    editor.ui.registry.addButton('addTab', {
      text: 'Add tab',
      onAction: () => {
        editor.plugins.help.addTab({
          name: 'custom3',
          title: 'Custom Tab 3',
          items: [
            {
              type: 'htmlpanel',
              html: '<p>This is yet another custom tab</p>',
            }
          ]
        });
      }
    });
  }
});

API

示例：使用 addTab API

tinymce.activeEditor.plugins.help.addTab({
  name: 'custom',
  title: 'My Custom Tab',
  items: [
    {
      type: 'htmlpanel',
      html: '<p>This is a custom tab</p>',
    }
  ]
});

为 help 插件暴露元数据

有关如何从自定义插件中暴露元数据，并将其添加到 Help 插件的已安装插件列表中的信息，请参阅创建插件页面。

工具栏按钮

Help 插件提供了以下工具栏按钮：

可以使用以下方式将这些工具栏按钮添加到编辑器中：

• 通过 toolbar 配置选项。

• 通过 quickbars_insert_toolbar 配置选项。

• 通过自定义上下文工具栏。

菜单项

Help 插件提供了以下菜单项：

可以使用以下方式将这些菜单项添加到编辑器中：

• 通过 menu 配置选项。

• 通过 contextmenu 配置选项。

• 通过 自定义菜单工具栏按钮。

命令

Help 插件提供了以下 TinyMCE 命令。

tinymce.activeEditor.execCommand('mceHelp');