存储

PreviousNext

Plate 存储的 API 参考文档。

Plate 使用 jotai-x 来存储编辑器的状态。

Plate 存储

PlateStoreState 对象存储了 Plate 编辑器的状态。它包含了编辑器的 ID、当前值、插件以及其他设置的信息。

State

    Plate 编辑器的引用。

    • 默认值: createPlateFallbackEditor()

    用作 provider 作用域的唯一 ID。如果在同一个 React 树中有多个 Plate，请使用它。

    • 默认值: 随机 ID

    编辑器容器元素的引用。

    用于装饰编辑器中范围的函数。

    (options: { editor: PlateEditor; entry: NodeEntry }) => TRange[]
    (options: { editor: PlateEditor; entry: NodeEntry }) => TRange[]

    Editable 是否已渲染，以便 slate DOM 可解析。

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

    (options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void
    (options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void

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

    (options: { editor: PlateEditor; selection: TSelection }) => void
    (options: { editor: PlateEditor; selection: TSelection }) => void

    编辑器子节点变化时的受控回调函数。

    (options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void
    (options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void

    节点操作发生时的受控回调函数。

    (options: {
  editor: PlateEditor;
  node: Descendant;
  operation: NodeOperation;
  prevNode: Descendant
}) => void
    (options: {
  editor: PlateEditor;
  node: Descendant;
  operation: NodeOperation;
  prevNode: Descendant
}) => void

    参数:

    • editor: Plate 编辑器实例
    • node: 操作后的节点
    • operation: 发生的节点操作（insert、remove、set、merge、split、move）
    • prevNode: 操作前的节点

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

    文本操作发生时的受控回调函数。

    (options: {
  editor: PlateEditor;
  node: Descendant;
  operation: TextOperation;
  prevText: string;
  text: string
}) => void
    (options: {
  editor: PlateEditor;
  node: Descendant;
  operation: TextOperation;
  prevText: string;
  text: string
}) => void

    参数:

    • editor: Plate 编辑器实例
    • node: 包含变化文本的父节点
    • operation: 发生的文本操作（insert_text 或 remove_text）
    • prevText: 操作前的文本内容
    • text: 操作后的文本内容

    编辑器是否是主要的。如果没有活跃的编辑器，PlateController 将使用第一个挂载的主要编辑器。

    • 默认值: true

    编辑器是否为只读模式。

    渲染编辑器中元素的函数。

    渲染编辑器中叶子节点的函数。

    调用 redecorate 时递增的版本号。这是 decorate 函数的依赖项。

    每次编辑器变化时递增的版本号。

    每次编辑器选区变化时递增的版本号。

    每次编辑器子节点变化时递增的版本号。

访问存储

import { usePlateStore, useEditorRef, useEditorPlugin } from 'platejs/react'
 
// 直接访问存储
const store = usePlateStore(id?)
 
// 通过编辑器引用访问
const store = useEditorRef().store
 
// 通过插件上下文访问
const store = useEditorPlugin(myPlugin).store
import { usePlateStore, useEditorRef, useEditorPlugin } from 'platejs/react'
 
// 直接访问存储
const store = usePlateStore(id?)
 
// 通过编辑器引用访问
const store = useEditorRef().store
 
// 通过插件上下文访问
const store = useEditorPlugin(myPlugin).store

注意：id 参数是可选的，默认使用最近的编辑器。

存储钩子

以下钩子可用于与 Plate 存储交互：

import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'
import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'

usePlateState

获取和设置存储属性的值。

const [readOnly, setReadOnly] = usePlateState('readOnly', id?)
const [readOnly, setReadOnly] = usePlateState('readOnly', id?)

usePlateValue

订阅存储属性的值。

const readOnly = usePlateValue('readOnly', id?)
const readOnly = usePlateValue('readOnly', id?)

usePlateSet

设置存储属性的值。

const setReadOnly = usePlateSet('readOnly', id?)
const setReadOnly = usePlateSet('readOnly', id?)

事件编辑器存储

该存储是一个对象，其属性键是事件名称（例如 'focus'），属性值是编辑器 ID。

  • 这在有多个编辑器时非常有用，可以根据 DOM 事件（例如最近聚焦的编辑器）获取一个编辑器。
  • Plate 的核心插件之一将存储以下事件。

State

    最近失去焦点的编辑器 ID。

    当前正在聚焦的编辑器 ID。

    最近的编辑器 ID。

import { EventEditorStore, useEventEditorValue } from 'platejs'
 
// 获取值
const focusedId = EventEditorStore.get('focus')
 
// 设置值
EventEditorStore.set('focus', editorId)
 
// 订阅变化
const focusedId = useEventEditorValue('focus')
import { EventEditorStore, useEventEditorValue } from 'platejs'
 
// 获取值
const focusedId = EventEditorStore.get('focus')
 
// 设置值
EventEditorStore.set('focus', editorId)
 
// 订阅变化
const focusedId = useEventEditorValue('focus')

useEventPlateId

获取最近的事件编辑器 ID。

Parameters

    如果定义了，则返回该 ID。

Returnsstring

    如果可用，则返回上下文中的 plate id，否则返回最近的事件编辑器 ID 或 PLATE_SCOPE。