TinyMCE 中 UI 组件的 context 属性可以根据预定义或自定义条件动态激活或停用按钮和菜单项。

注册上下文

在编辑器 API 的 UI Registry 部分（editor.ui.registry）中提供了添加自定义上下文的方法。

  • editor.ui.registry.addContext(identifier, predicate: (value: string) ⇒ boolean)

这些方法接受两个参数：

  • identifier - 上下文的唯一名称

  • predicate - 确定是否满足上下文条件的函数。它接受一个字符串参数并返回布尔值：

    • 参数 (string)：上下文语法中提供的值（例如，在 'mode:design' 中，'design' 将被传递给谓词）。

    • 返回值 (boolean)：如果满足条件（组件应启用）则返回 true；否则返回 false。

示例
setup: (editor) => {
  editor.ui.registry.addContext('mode', (value: string) => {
    return value === editor.mode.get();
  });
}

上下文语法

上下文使用语法：<key>:<value> 指定。

  • key - 上下文的类型，用于查找已注册的上下文。

  • value - 传递给谓词函数进行评估的条件。

要否定任何上下文，请在值前放置 !，使用格式：<key>:!<value>。

内置上下文

TinyMCE 提供了几个内置上下文：

名称描述

any

无论编辑器状态如何，此上下文始终启用。

mode:<mode_name>

此上下文用于根据编辑器的当前模式启用或禁用 UI 组件。

  • mode:design：仅在设计模式下启用。

  • mode:readonly：仅在只读模式下启用。

insert:<element_name>

此上下文确定是否可以在当前选区插入特定的子元素。它使用 editor.schema.isValidChild 检查指定的元素及其子元素是否有效。

  • insert:p：如果可以在当前选区插入段落，则启用。

formatting:<format_name>

此上下文使用 editor.formatter.canApply 检查是否可以将特定格式应用于当前选区。

  • formatting:bold：如果可以将粗体格式应用于当前选区，则启用。

editable

此上下文使用 editor.selection.isEditable 检查当前选区是否可编辑。

在 UI 组件中使用上下文

要在 UI 组件中使用上下文，请应用 context 属性。

例如：
setup: (editor) => {
  editor.ui.registry.addButton('customToolbarButton', {
    text: 'button',
    onAction: () => {
      console.log('clicked');
    },
    context: 'any'
  });
}

状态更新

以下事件触发 UI 组件的状态更新：

在这些更新期间，UI 组件会重新评估其上下文并相应地调整其启用或禁用状态：

  1. NodeChange：当编辑器内容中的选中节点发生变化时触发。

    • 影响：除 mode 外的所有上下文，包括 formatting、editable、insert 和自定义上下文。

  2. SwitchMode：当编辑器的模式发生变化时触发。

  3. init：当编辑器完全初始化时触发。