Plate 组件

PreviousNext

Plate 组件的 API 参考文档。

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

PlateContent 是用于渲染编辑器内容的组件。

<Plate>

Props

  • children ReactNode

    子组件可以访问 plate store。

  • editor PlateEditor

    受控的 editor 实例。此属性为必填项。

  • decorate optional (ctx: SlatePluginContext<C>) => TRange[]

    参见 Slate 文档。

  • onChange optional ({ value, editor }: { value: Value; editor: PlateEditor }) => void

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

  • onSelectionChange optional (selection: TRange | null) => void

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

  • onValueChange optional ({ value, editor }: { value: Value; editor: PlateEditor }) => void

    编辑器值变化时的回调函数。

  • primary optional boolean

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

    • 默认值: true

  • readOnly optional boolean

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

  • renderElement optional FC<RenderElementProps>

    自定义元素渲染函数。

  • renderLeaf optional FC<RenderLeafProps>

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

<PlateContent>

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

Props

Collapse all

  • autoFocusOnEditable optional boolean

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

  • renderEditable optional (editable: ReactNode) => ReactNode

    自定义 Editable 节点。

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

  • as optional React.ElementType

  • autoFocus optional boolean

  • decorate optional (ctx: SlatePluginContext<C>) => TRange[]

  • disableDefaultStyles optional boolean

  • onDOMBeforeInput optional (event: Event) => void

  • onKeyDown optional (event: KeyboardEvent) => void

  • placeholder optional string

  • readOnly optional boolean

  • renderElement optional FC<RenderElementProps>

  • renderLeaf optional FC<RenderLeafProps>

  • renderPlaceholder optional FC<RenderPlaceholderProps>

  • role optional string

  • scrollSelectionIntoView optional (editor: ReactEditor, domRange: DOMRange) => void

  • style optional CSSProperties

Plate 工作原理

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

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

Plate 提供了编辑器状态的 store 并渲染其子组件。它使用 PlateStoreProvider 使编辑器状态和相关功能对其子组件可用。

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

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

Plate UtilsPlate Components