Plate 组件

PreviousNext

Plate 组件的 API 参考。

Plate 是将编辑器状态加载到 store provider 的根组件。

PlateContent 是渲染编辑器的组件。

<Plate>

Props

    子组件可以访问 plate store。

    受控的 editor 实例。此属性是必需的。

    参见 Slate 文档。

    编辑器状态变化时调用的受控回调。

    编辑器选区变化时调用的回调。

    编辑器值变化时调用的回调。

    节点操作发生时调用的回调（插入、删除、设置、合并、拆分、移动）。

    参数：

    • editor：Plate 编辑器实例
    • node：操作后的节点
    • operation：发生的节点操作
    • prevNode：操作前的节点

    注意： 对于 insert_node 和 remove_node 操作，node 和 prevNode 包含相同的值，以避免空值情况。

    文本操作发生时调用的回调（插入或删除文本）。

    参数：

    • editor：Plate 编辑器实例
    • node：包含已更改文本的父节点（块级或内联元素）
    • operation：发生的文本操作（insert_text 或 remove_text）
    • prevText：操作前的文本内容
    • text：操作后的文本内容

    控制与 PlateController 一起使用时编辑器是否默认被视为活动状态。

    • 默认值： true

    如果为 true，编辑器处于只读模式。

    元素的自定义渲染函数。

    叶子节点的自定义渲染函数。

<PlateContent>

Editable 组件的属性。继承自 TextareaHTMLAttributes<HTMLDivElement>。

Props

    当编辑器从只读模式转换为可编辑模式时（readOnly 从 true 变为 false）自动聚焦编辑器。

    自定义 Editable 节点。

    • 默认值： <Editable {...props} />

Plate 工作原理

Plate 需要一个 editor 属性，它应该是 PlateEditor 的实例。如果 editor 为 null，Plate 将不会渲染任何内容。

Plate 组件不处理编辑器的创建或插件的管理。这些职责由 createPlateEditor 处理。

Plate 为编辑器状态提供一个 store 并渲染其子组件。它使用 PlateStoreProvider 使编辑器状态和相关函数对其子组件可用。

元素和叶子节点的渲染逻辑主要由插件系统处理，如果没有找到特定节点类型的插件，renderElement 和 renderLeaf 属性将作为后备方案。

有关创建和配置编辑器的更多详细信息，请参阅编辑器配置指南。