Plugin Components

学习如何为 Plate 插件创建和样式化自定义组件。

默认情况下，Plate 插件是无头的，这意味着所有节点都将被渲染为纯文本。本指南将向您展示如何为编辑器创建和样式化自定义组件。

Plate UI

除非您更倾向于从头开始构建所有内容，否则我们建议使用 Plate UI 来开始。Plate UI 是一个组件集合，您可以将其复制到您的应用程序中并根据需要进行修改。

在大多数方面，无论您使用 Plate UI 还是从头开始构建自己的组件，向编辑器添加组件的过程都是相同的。

定义组件

定义组件最简单的方法是使用 PlateElement 或 PlateLeaf 作为内容的包装器。这将确保正确的 props 按照 Slate 的要求应用到您的 HTML 元素上。

请注意，必须无条件地渲染 children prop 以使编辑器正常工作，包括对于空节点。

Element

import { PlateElement, PlateElementProps } from '@udecode/plate-common/react';
 
export function BlockquoteElement({
  className,
  children,
  ...props
}: PlateElementProps) {
  return (
    <PlateElement asChild className={className} {...props}>
      <blockquote>{children}</blockquote>
    </PlateElement>
  );
}

Leaf

import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common/react';
 
export function CodeLeaf({ className, children, ...props }: PlateLeafProps) {
  return (
    <PlateLeaf asChild className={className} {...props}>
      <code>{children}</code>
    </PlateLeaf>
  );
}

使用 CSS 样式化

我们建议使用 Tailwind CSS 来样式化组件，这是 Plate UI 使用的模式。但是，也可以使用全局 CSS 文件根据 Slate 生成的类名来样式化节点。

对于每个节点，Slate 将生成一个以 slate- 开头，后跟节点类型的类名。例如，段落节点可以按如下方式样式化：

.slate-p {
  margin-bottom: 1rem;
}

注册组件

要使用您的组件，您需要将它们与相关插件一起注册。有两种方法可以做到这一点。

Plugin Options

要注册一个组件，请使用 node.component 选项：

const ParagraphPlugin = createPlatePlugin({
  // ... 
  node: {
    component: ParagraphElement,
  },
});
 
// OR
const ParagraphPlugin = BaseParagraphPlugin.withComponent(ParagraphElement)

Editor Options

或者，您可以使用 createPlateEditor 的 override.components 选项为每个插件键指定组件：

const editor = createPlateEditor({
  plugins: [ParagraphPlugin, LinkPlugin],
  override: {
    components: {
      [ParagraphPlugin.key]: ParagraphElement,
      [LinkPlugin.key]: LinkElement,
      // ...other components
    },
  },
});
Plugin ContextEditor Configuration