║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: 插件配置 description: 如何配置和自定义Plate插件。

Plate插件具有高度可配置性，允许您根据需要定制其行为。本指南将介绍最常见的配置选项及使用方法。

• 入门指南：组件 - 添加插件到编辑器的说明
• PlatePlugin API - 创建插件的完整API参考

基础插件配置

新建插件

最基本的插件配置只需一个key：

const MyPlugin = createPlatePlugin({
  key: 'minimal',
});

虽然这个插件目前没有任何功能，但它是更复杂配置的起点。

现有插件

使用.configure方法可以配置现有插件：

const ConfiguredPlugin = MyPlugin.configure({
  options: {
    myOption: 'new value',
  },
});

节点插件

节点插件通过node属性定义编辑器中的新节点类型，可以是元素（块级或行内）或叶子节点（用于文本级格式）。

元素

要创建新元素类型，使用node.isElement选项：

const ParagraphPlugin = createPlatePlugin({
  key: 'p',
  node: {
    isElement: true,
    type: 'p',
  },
});

您可以为元素关联组件。详见插件组件。

const ParagraphPlugin = createPlatePlugin({
  key: 'p',
  node: {
    isElement: true,
    type: 'p',
    component: ParagraphElement,
  },
});

行内元素、Void元素和叶子节点

对于行内元素、void元素或叶子节点，使用相应的节点选项：

const LinkPlugin = createPlatePlugin({
  key: 'link',
  node: {
    isElement: true,
    isInline: true,
    type: 'a',
  },
});

const ImagePlugin = createPlatePlugin({
  key: 'image',
  node: {
    isElement: true,
    isVoid: true,
    type: 'img',
  },
});

const BoldPlugin = createPlatePlugin({
  key: 'bold',
  node: {
    isLeaf: true,
  },
});

行为插件

除了渲染元素或标记外，您可能还想自定义编辑器的行为。Plate提供了多种插件选项来修改编辑器行为。

插件规则

rules属性允许您配置常见的编辑行为，如拆分、删除和合并节点，而无需重写编辑器方法。这是为自定义元素定义直观交互的强大方式。

例如，您可以定义当用户在空标题中按Enter或在块引用开头按Backspace时发生的情况。

import { H1Plugin } from '@platejs/heading/react';

H1Plugin.configure({
  rules: {
    break: { empty: 'reset' },
  },
});

完整规则列表和可用操作请见插件规则指南。

事件处理器

推荐通过handlers插件选项响应插件内部用户生成的事件。处理器应是一个接收PlatePluginContext & { event }对象的函数。

onChange处理器（当编辑器值变化时调用）是个例外，其上下文对象包含变化的value而非event。

const ExamplePlugin = createPlatePlugin({
  key: 'example',
  handlers: {
    onChange: ({ editor, value })  => {
      console.info(editor, value);
    },
    onKeyDown: ({ editor, event }) => {
      console.info(`You pressed ${event.key}`);
    },
  },
});

注入属性

您可能希望向具有特定属性的任何节点注入类名或CSS属性。例如，以下插件为具有align属性的段落设置textAlign CSS属性。

import { KEYS } from 'platejs';

const TextAlignPlugin = createPlatePlugin({
  key: 'align',
  inject: {
    nodeProps: {
      defaultNodeValue: 'start',
      nodeKey: 'align',
      styleKey: 'textAlign',
      validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
    },
    targetPlugins: [KEYS.p],
    // 这将注入到所有`targetPlugins`中。本例中，ParagraphPlugin将能够反序列化`textAlign`样式。
    targetPluginToInject: ({ editor, plugin }) => ({
      parsers: {
        html: {
          deserializer: {
            parse: ({ element, node }) => {
              if (element.style.textAlign) {
                node[editor.getType('align')] = element.style.textAlign;
              }
            },
          },
        },
      },
    }),
  },
});

受上述插件影响的段落节点示例如下：

{
  type: 'p',
  align: 'right',
  children: [{ text: '本段落右对齐！' }],
}

重写编辑器方法

overrideEditor方法提供了一种在保持访问原始实现的同时重写现有编辑器方法的方式。这在您想修改核心编辑器功能行为时特别有用。

const CustomPlugin = createPlatePlugin({
  key: 'custom',
}).overrideEditor(({ editor, tf: { deleteForward }, api: { isInline } }) => ({
  // 重写转换
  transforms: {
    deleteForward(options) {
      // 删除前的自定义逻辑
      console.info('向前删除中...');
      
      // 调用原始转换
      deleteForward(options);
      
      // 删除后的自定义逻辑
      console.info('已向前删除');
    },
  },
  // 重写API方法
  api: {
    isInline(element) {
      // 自定义行内元素检查
      if (element.type === 'custom-inline') {
        return true;
      }
      
      // 回退到原始行为
      return isInline(element);
    },
  },
}));

• 通过解构的tf（转换）和api参数访问原始方法
• 现有方法的类型安全重写
• 转换和API方法的清晰分离
• 插件上下文和选项访问

带类型选项的示例：

type CustomConfig = PluginConfig<
  'custom',
  { allowDelete: boolean }
>;

const CustomPlugin = createTPlatePlugin<CustomConfig>({
  key: 'custom',
  options: { allowDelete: true },
}).overrideEditor(({ editor, tf: { deleteForward }, getOptions }) => ({
  transforms: {
    deleteForward(options) {
      // 使用类型化选项控制行为
      if (!getOptions().allowDelete) {
        return;
      }
      
      deleteForward(options);
    },
  },
}));

扩展编辑器（高级）

对于复杂功能，您可以直接扩展编辑器。使用extendEditor插件选项在创建后直接修改editor对象的属性。

const CustomNormalizerPlugin = createPlatePlugin({
  key: 'customNormalizer',
  extendEditor: ({ editor }) => {
    editor.customState = true;
    
    return editor;
  },
});

<Callout type="info" title="extendEditor与overrideEditor的区别"> - 当集成需要直接编辑器变异的传统Slate插件（如`withYjs`）时使用`extendEditor`。每个插件只有一个`extendEditor`。 - 修改编辑器行为时优先使用`overrideEditor`，因为它具有单一职责和更好的类型安全性。可以多次调用以分层不同的重写。 </Callout>

高级插件配置

插件存储

每个插件都有自己的存储，可用于管理插件特定状态。

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  options: {
    count: 0,
  },
}).extend(({ editor, plugin, setOption }) => ({
  handlers: {
    onClick: () => {
      setOption('count', 1);
    },
  },
}));

您可以使用以下方法访问和更新存储：

// 获取当前值
const count = editor.getOption(MyPlugin, 'count');

// 设置新值
editor.setOption(MyPlugin, 'count', 5);

// 基于先前状态更新值
editor.setOption(MyPlugin, 'count', (prev) => prev + 1);

在React组件中，可以使用usePluginOption或usePluginOptions钩子订阅存储变更：

const MyComponent = () => {
  const count = usePluginOption(MyPlugin, 'count');
  return <div>计数: {count}</div>;
};

更多内容请见插件上下文和编辑器方法指南。

依赖项

使用dependencies属性指定插件依赖项，确保当前插件加载前所需插件已加载。

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  dependencies: ['paragraphPlugin', 'listPlugin'],
});

启用标志

enabled属性允许您有条件地启用或禁用插件：

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  enabled: true, // 或false禁用
});

嵌套插件

Plate支持嵌套插件，允许创建插件层次结构。使用plugins属性定义子插件：

const ParentPlugin = createPlatePlugin({
  key: 'parent',
  plugins: [
    createPlatePlugin({ key: 'child1' }),
    createPlatePlugin({ key: 'child2' }),
  ],
});

插件优先级

priority属性决定插件注册和执行的顺序。优先级值较高的插件优先处理：

const HighPriorityPlugin = createPlatePlugin({
  key: 'highPriority',
  priority: 100,
});

const LowPriorityPlugin = createPlatePlugin({
  key: 'lowPriority',
  priority: 50,
});

这在需要确保某些插件先于其他插件初始化或运行时特别有用。

自定义解析器

parsers属性接受字符串键来构建自己的解析器：

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  parsers: {
    myCustomParser: {
      deserializer: {
        parse: // ...
      },
      serializer: {
        parse: // ...
      }
    },
  },
});

核心插件包含html和htmlReact解析器。

类型化插件

使用上述方法时，插件类型会根据给定配置自动推断。

如果需要显式传递泛型类型，可以使用createTPlatePlugin。

使用createTPlatePlugin

createTPlatePlugin函数允许创建类型化插件：

type CodeBlockConfig = PluginConfig<
  // key
  'code_block',
  // options
  { syntax: boolean; syntaxPopularFirst: boolean },
  // api
  {
    plugin: {
      getSyntaxState: () => boolean;
    };
    toggleSyntax: () => void;
  },
  // transforms
  {
    insert: {
      codeBlock: (options: { language: string }) => void;
    }
  }
>;

const CodeBlockPlugin = createTPlatePlugin<CodeBlockConfig>({
  key: 'code_block',
  options: { syntax: true, syntaxPopularFirst: false },
}).extendEditorApi<CodeBlockConfig['api']>(() => ({
  plugin: {
    getSyntaxState: () => true,
  },
  toggleSyntax: () => {},
})).extendEditorTransforms<CodeBlockConfig['transforms']>(() => ({
  insert: {
    codeBlock: ({ editor, getOptions }) => {
      editor.tf.insertBlock({ type: 'code_block', language: getOptions().language });
    },
  },
}));

使用类型化插件

使用类型化插件时，您将获得完整的类型检查和自动补全功能 ✨

const editor = createPlateEditor({
  plugins: [ExtendedCodeBlockPlugin],
});

// 类型安全的选项访问
const options = editor.getOptions(ExtendedCodeBlockPlugin);
options.syntax;
options.syntaxPopularFirst;
options.hotkey;

// 类型安全的API
editor.api.toggleSyntax();
editor.api.plugin.getSyntaxState();
editor.api.plugin2.setLanguage('python');
editor.api.plugin.getLanguage();

// 类型安全的转换
editor.tf.insert.codeBlock({ language: 'typescript' });

另请参阅

更多插件选项请见PlatePlugin API。

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║