EditorState is the top-level state object for the editor.

EditorState 对于编辑器来说是一个顶级的状态对象。

It is an Immutable Record that represents the entire state of a Draft editor, including:

  • The current text content state
  • The current selection state
  • The fully decorated representation of the contents
  • Undo/redo stacks
  • The most recent type of change made to the contents

这是一个Immutable Record 代表了一个Draft 编辑器的全部状态,包括:

  • 当前文本内容状态
  • 当前选择状态
  • 内容全部的装饰器表示
  • Undo/redo 栈
  • 对内容所做的最新类型的更改

Note You should not use the Immutable API when using EditorState objects. Instead, use the instance getters and static methods below.

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

Overview

Common instance methods

常见的示例方法

The list below includes the most commonly used instance methods for EditorState objects.

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

Common Instance Methods

getCurrentContent

  1. getCurrentContent(): ContentState

Returns the current contents of the editor.

返回当前编辑器的内容。

getSelection

  1. getSelection(): SelectionState

Returns the current cursor/selection state of the editor.

返回当前编辑器的光标或者选择状态。

getCurrentInlineStyle

  1. getCurrentInlineStyle(): DraftInlineStyle

Returns an OrderedSet<string> that represents the “current” inline style for the editor.

返回一个OrderedSet<string> 代表当前编辑器所拥有的内联样式。

This is the inline style value that would be used if a character were inserted for the current ContentState and SelectionState, and takes into account any inline style overrides that should be applied.

如果为当前ContentStateSelectionState插入字符,将使用内联样式值,并考虑到应用的任何内联样式重写。

getBlockTree

  1. getBlockTree(blockKey: string): List;

Returns an Immutable List of decorated and styled ranges. This is used for rendering purposes, and is generated based on the currentContent and decorator.

返回一个装饰器和样式范围的Immutable List,它用于渲染编辑器的内容,基于currentContentdecorator

At render time, this object is used to break the contents into the appropriate block, decorator, and styled range components.

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

Static Methods

createEmpty

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

Returns a new EditorState object with an empty ContentState and default configuration.

返回一个新的EditoreState对象包含一个空的ContentState和默认的配置。

createWithContent

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

Returns a new EditorState object based on the ContentState and decorator provided.

返回一个新的EditorState对象,基于给定的ContentStatedecorator.

create

  1. static create(config: EditorStateCreationConfig): EditorState

Returns a new EditorState object based on a configuration object. Use this if you need custom configuration not available via the methods above.

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

push

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

Returns a new EditorState object with the specified ContentState applied as the new currentContent. Based on the changeType, this ContentState may be regarded as a boundary state for undo/redo behavior.

All content changes must be applied to the EditorState with this method.

To be renamed.

返回一个新的EditorState对象,该对象应用指定的ContentState作为新的currentContent。基于changeType,这个ContentState可以被看作是撤销/重做行为的边界状态。

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

此方法要重命名。

undo

  1. static undo(editorState: EditorState): EditorState

Returns a new EditorState object with the top of the undo stack applied as the new currentContent.

The existing currentContent is pushed onto the redo stack.

返回一个新的EditorState对象,应用undo堆栈的顶部作为新的currentContent

现有的currentContent被推送到redo堆栈上。

redo

  1. static redo(editorState: EditorState): EditorState

Returns a new EditorState object with the top of the redo stack applied as the new currentContent.

The existing currentContent is pushed onto the undo stack.

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

现有的currentContent被推送到undo堆栈上。

acceptSelection

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

Returns a new EditorState object with the specified SelectionState applied, but without requiring the selection to be rendered.

返回一个新的EditorState对象,该对象应用了指定的SelectionState,但不需要渲染选择表现。

For example, this is useful when the DOM selection has changed outside of our control, and no re-renders are necessary.

例如,当DOM选择在我们的控制之外发生更改,并且不需要重新渲染时,这是非常有用的。

forceSelection

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

Returns a new EditorState object with the specified SelectionState applied, forcing the selection to be rendered.

返回一个新的EditorState对象,并应用指定的SelectionState,强制渲染选择表现。

This is useful when the selection should be manually rendered in the correct location to maintain control of the rendered output.

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

moveSelectionToEnd

  1. static moveSelectionToEnd(editorState: EditorState): EditorState

Returns a new EditorState object with the selection at the end.

返回一个新的EditorState对象,该对象的选择器位于末尾。

Moves selection to the end of the editor without forcing focus.

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

moveFocusToEnd

  1. static moveFocusToEnd(editorState: EditorState): EditorState

Returns a new EditorState object with selection at the end and forces focus.

返回一个新的EditorState对象,该对象的选择器放在最后并强制焦点。

This is useful in scenarios where we want to programmatically focus the input and it makes sense to allow the user to continue working seamlessly.

这在我们希望以编程方式集中输入并允许用户继续无缝工作的场景中非常有用。

setInlineStyleOverride

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

Returns a new EditorState object with the specified DraftInlineStyle applied as the set of inline styles to be applied to the next inserted characters.

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

set

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

Returns a new EditorState object with new options passed in. The method is inherited from the Immutable record API.

返回一个新的EditorState对象,其中传入了新的选项。该方法是从Record API继承的。

Properties and Getters

In most cases, the instance and static methods above should be sufficient to manage the state of your Draft editor.

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

Below is the full list of properties tracked by an EditorState, as well as their corresponding getter methods, to better provide detail on the scope of the state tracked in this object.

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

Note You should not use the Immutable API when using EditorState objects. Instead, use the instance getters and static methods above.

注意
在用EditorState对象的时候,你不应该使用Immutable API,相反,使用此对象的实例以上提供的getters和静态方法。

allowUndo

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

Whether to allow undo/redo behavior in this editor. Default is true.

是否允许 undo/redo 行为在编辑器上。默认值是true.

Since the undo/redo stack is the major source of memory retention, if you have an editor UI that does not require undo/redo behavior, you might consider setting this to false.

由于内存是undo/redo堆栈保留的主要来源,如果您有一个编辑器UI不需要undo/redo行为,您可能会考虑将其设置为false。

currentContent

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

The currently rendered ContentState. See getCurrentContent().

返回当前渲染的ContentState;

decorator

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

The current decorator object, if any.

如果存在的话,返回当前的decorator对象。

Note that the ContentState is independent of your decorator. If a decorator is provided, it will be used to decorate ranges of text for rendering.

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

directionMap

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

A map of each block and its text direction, as determined by UnicodeBidiService.

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

You should not manage this manually.

您不应该手动去管理它。

forceSelection

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

Whether to force the current SelectionState to be rendered.

是否强制渲染当前SelectionState

You should not set this property manually — see forceSelection().

你不应该手动地去设置这个变量。— 看forceSelection().

inCompositionMode

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

Whether the user is in IME composition mode. This is useful for rendering the appropriate UI for IME users, even when no content changes have been committed to the editor. You should not set this property manually.

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

inlineStyleOverride

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

An inline style value to be applied to the next inserted characters. This is used when keyboard commands or style buttons are used to apply an inline style for a collapsed selection range.

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

DraftInlineStyle is a type alias for an immutable OrderedSet of strings, each of which corresponds to an inline style.

DraftInlineStyle是一个ImmutableOrderedSet字符串的类型别名,每个字符串对应一个内联样式。

lastChangeType

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

The type of content change that took place in order to bring us to our current ContentState. This is used when determining boundary states for undo/redo.

上一次发生的内容变化类型,发生的一切都是为了将我们达到当前的ContentState.这在确定撤销/重做的边界状态时使用。

nativelyRenderedContent

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

During edit behavior, the editor may allow certain actions to render natively. For instance, during normal typing behavior in the contentEditable-based component, we can typically allow key events to fall through to print characters in the DOM. In doing so, we can avoid extra re-renders and preserve spellcheck highlighting.

在编辑行为期间,编辑器可能允许某些操作本地呈现。例如,在基于内容的组件的正常键入行为期间,我们通常可以允许键事件在DOM中打印字符。这样做,我们可以避免额外的重新渲染和保留拼写检查高亮显示。

When allowing native rendering behavior, it is appropriate to use the nativelyRenderedContent property to indicate that no re-render is necessary for this EditorState.

当允许本地呈现行为时,可以使用nativelyRenderedContent属性来指示此编辑器EditorState不需要重新render。

redoStack

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

An immutable stack of ContentState objects that can be resurrected for redo operations. When performing an undo operation, the current ContentState is pushed onto the redoStack.

一个不可变的ContentState对象堆栈,可以为redo操作而恢复。当执行undo操作时,当前的ContentState被推送到redoStack

You should not manage this property manually. If you would like to disable undo/redo behavior, use the allowUndo property.

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

See also undoStack.

也看下undoStack

selection

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

The currently rendered SelectionState. See acceptSelection() and forceSelection(). You should not manage this property manually.

当前渲染的SelectionState.看acceptSelection()forceSelection() .
你不应该手动管理此属性。

treeMap

  1. treeMap: OrderedMap<string, List>;

The fully decorated and styled tree of ranges to be rendered in the editor component. The treeMap object is generated based on a ContentState and an optional decorator (DraftDecoratorType).

At render time, components should iterate through the treeMap object to render decorated ranges and styled ranges, using the getBlockTree() method.

You should not manage this property manually.

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

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

你不应该手动管理此属性。

undoStack

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

An immutable stack of ContentState objects that can be restored for undo operations.

一个不可变的ContentState对象堆栈,可以为undo操作恢复。

When performing operations that modify contents, we determine whether the current ContentState should be regarded as a “boundary” state that the user can reach by performing an undo operation. If so, the ContentState is pushed onto the undoStack. If not, the outgoing ContentState is discarded.

当执行修改内容的操作时,我们抉择当前的ContentState是否应该被视为用户可以通过执行undo操作到达的“边界”状态。如果是可以通过,ContentState将被推送到undoStack。否则,传出的ContentState将被丢弃。

You should not manage this property manually. If you would like to disable undo/redo behavior, use the allowUndo property.

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

See also redoStack.

也看下redoStack