id: api-reference-editor-state

title: EditorState 编辑器状态

EditorState是编辑器的顶级状态对象。

它是Immutable Record,代表Draft编辑器的整个状态,包括

  • 当前文本内容状态
  • 当前选择状态
  • 内容的完全修饰表示
  • Undo/redo堆栈
  • 对内容所做的最新更改

注意

使用EditorState对象时,不应使用Immutable API。 相反,请使用下面的实例getter和静态方法。

总览

普通实例方法

下面的列表包括最常用的EditorState对象实例方法。

静态方法

属性

注意

使用静态EditorState方法来设置属性,而不是直接使用Immutable API。

这意味着使用EditorState.set将新选项传递给EditorState实例。

例子

  1. const editorState = EditorState.createEmpty();
  2. const editorStateWithoutUndo = EditorState.set(editorState, {
  3. allowUndo: false,
  4. });

普通实例方法

getCurrentContent

  1. getCurrentContent(): ContentState

返回编辑器的当前内容。

getSelection

  1. getSelection(): SelectionState

返回编辑器的当前cursor/selection(光标/选择)的状态。

getCurrentInlineStyle

  1. getCurrentInlineStyle(): DraftInlineStyle

返回一个OrderedSet <string>,它表示编辑器的“当前”内联样式。

这是在为当前ContentStateSelectionState插入字符时将使用的内联样式值,并考虑了应应用的任何内联样式替代。

getBlockTree

  1. getBlockTree(blockKey: string): List;

返回修饰范围和样式范围的Immutable List。 这用于渲染目的,并且是基于currentContentdecorator生成的。

在渲染时,此对象用于将内容分解为适当的块,装饰器和样式化的范围组件。

静态方法

createEmpty

  1. static createEmpty(decorator?: DraftDecoratorType): EditorState

返回具有空ContentState和默认配置的新EditorState对象。

createWithContent

  1. static createWithContent(
  2. contentState: ContentState,
  3. decorator?: DraftDecoratorType
  4. ): EditorState

根据提供的ContentState和装饰器返回一个新的EditorState对象。

create

  1. static create(config: EditorStateCreationConfig): EditorState

根据配置对象返回一个新的EditorState对象。 如果您需要通过上述方法无法使用的自定义配置,请使用此选项。

push

  1. static push(
  2. editorState: EditorState,
  3. contentState: ContentState,
  4. changeType: EditorChangeType
  5. ): EditorState

返回一个新的EditorState对象,并将指定的ContentState用作新的currentContent。 基于changeType,此ContentState`可以视为undo/redo(撤消/重做)行为的边界状态。

必须使用此方法将所有内容更改都应用于EditorState

重命名。

undo

  1. static undo(editorState: EditorState): EditorState

返回一个新的EditorState对象,并将撤消堆栈的顶部用作新的currentContent

现有的currentContent被推入redo堆栈。

redo

  1. static redo(editorState: EditorState): EditorState

返回一个新的EditorState对象,并将redo堆栈的顶部用作新的currentContent

现有的currentContent被推入undo堆栈。

acceptSelection

  1. static acceptSelection(
  2. editorState: EditorState,
  3. selectionState: SelectionState
  4. ): EditorState

返回一个新的EditorState对象,该对象已应用指定的SelectionState,但不需要渲染selection。

例如,当DOM选择在我们的控制范围之外更改并且不需要重新渲染时,这很有用。

forceSelection

  1. static forceSelection(
  2. editorState: EditorState,
  3. selectionState: SelectionState
  4. ): EditorState

返回一个新的EditorState对象,该对象已应用指定的SelectionState,强制渲染selection。

当应该在正确的位置手动渲染选择内容以保持对渲染输出的控制时,这很有用。

moveSelectionToEnd

  1. static moveSelectionToEnd(editorState: EditorState): EditorState

返回一个新的EditorState对象,该对象的最后一个selection。

将selection移到编辑器的末尾,而不强制焦点。

moveFocusToEnd

  1. static moveFocusToEnd(editorState: EditorState): EditorState

返回一个新的EditorState对象,该对象的末尾具有selection并强制focus。

这在我们要以编程方式集中输入的情况下很有用,并且允许用户继续无缝地工作是有意义的。

setInlineStyleOverride

  1. static setInlineStyleOverride(editorState: EditorState, inlineStyleOverride: DraftInlineStyle): EditorState

返回一个新的EditorState对象,该对象具有指定的DraftInlineStyle作为内联样式集,这些内联样式将应用于下一个插入的字符。

set

  1. static set(editorState: EditorState, options: EditorStateRecordType): EditorState

返回带有新选项的新EditorState对象。该方法继承自Immutable record API。

Properties and Getters 属性和吸气剂

在大多数情况下,上述实例和静态方法应足以管理Draft编辑器的状态

以下是EditorState跟踪的属性及其对应的getter方法的完整列表,以更好地提供有关此对象中跟踪的状态范围的详细信息。

注意

使用EditorState对象时,不应使用Immutable API。 而是使用上面的实例getter和静态方法。

allowUndo

  1. allowUndo: boolean;
  2. getAllowUndo();

在此编辑器中是否允许撤消/重做行为。 默认为true。

由于undo/redo(撤消/重做)堆栈是内存保留的主要来源,因此,如果您的编辑器UI不需要撤消/重做行为,则可以考虑将其设置为false

currentContent

  1. currentContent: ContentState;
  2. getCurrentContent();

当前渲染的ContentState。 请参见getCurrentContent()

decorator

  1. decorator: ?DraftDecoratorType;
  2. getDecorator()

当前装饰器对象(如果有)。

请注意,ContentState独立于装饰器。 如果提供了装饰器,则它将用于装饰文本范围以进行渲染。

directionMap

  1. directionMap: BlockMap;
  2. getDirectionMap();

每个块的map(映射)及其文本方向,由UnicodeBidiService确定

您不应该手动管理它。

forceSelection

  1. forceSelection: boolean;
  2. mustForceSelection();

是否强制渲染当前的SelectionState

您不应该手动设置此属性-请参见forceSelection()

inCompositionMode

  1. inCompositionMode: boolean;
  2. isInCompositionMode();

用户是否处于IME合成模式。 即使未对编辑器提交任何内容更改,这对于为IME用户渲染适当的UI也很有用。 您不应该手动设置此属性。

inlineStyleOverride

  1. inlineStyleOverride: DraftInlineStyle;
  2. getInlineStyleOverride();

一个内联样式值,将应用于下一个插入的字符。 当使用键盘命令或样式按钮为折叠的选择范围应用嵌入式样式时,将使用此样式。

DraftInlineStyle是不可变的immutable OrderedSet字符串的类型别名,每个字符串都对应一个内联样式。

lastChangeType

  1. lastChangeType: EditorChangeType;
  2. getLastChangeType();

为了使我们进入当前的ContentState而进行的内容更改的类型。 在确定撤消/重做的边界状态时使用。

nativelyRenderedContent

  1. nativelyRenderedContent: ?ContentState;
  2. getNativelyRenderedContent()

在编辑行为期间,编辑器可以允许某些操作本地渲染。 例如,在基于contentEditable的组件中的正常键入行为期间,我们通常可以允许击键事件落入以打印DOM中的字符。 这样一来,我们就可以避免重新渲染并保留拼写检查突出显示。

当允许本机渲染行为时,使用nativelyRenderedContent属性指示对此EditorState不需要重新渲染是适当的

redoStack

  1. redoStack: Stack<ContentState>;
  2. getRedoStack()

ContentState对象的immutable堆栈,可以对其进行重做操作。 执行撤消操作时,当前的ContentState被推送到redoStack上。

您不应该手动管理此属性。 如果要禁用撤消/重做行为,请使用allowUndo属性。

另请查看undoStack.

selection

  1. selection: SelectionState;
  2. getSelection();

当前渲染的SelectionState。 请查看acceptSelection() and forceSelection()

您不应该手动管理此属性.

treeMap

  1. treeMap: OrderedMap<string, List>;

完全装饰和样式化的ranges(范围)树,将在编辑器组件中渲染。 treeMap对象是基于ContentState和可选的装饰器(DraftDecoratorType)生成的。

在渲染时,组件应使用getBlockTree()方法遍历treeMap对象以渲染装饰范围和样式化范围。

您不应该手动管理此属性.

undoStack

  1. undoStack: Stack<ContentState>;
  2. getUndoStack()

不变的ContentState对象堆栈,可以将其还原以执行撤消操作。

在执行修改内容的操作时,我们确定是否应将当前ContentState视为用户通过执行撤消操作可以到达的“boundary(边界)”状态。 如果是这样,则将ContentState推送到undoStack上。 如果不是,则丢弃传出的ContentState

您不应该手动管理此属性。 如果要禁用撤消/重做行为,请使用allowUndo属性。

另外查看redoStack.