EditorState

编辑状态

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:

它是一个不可变的 记录 ,代表了一个 Draft 编辑器的整体状态,包括:

  • 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
  • 内容最新的变更类型

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 对象实例的方法。

getCurrentContent(): ContentState
getSelection(): SelectionState
getCurrentInlineStyle(): DraftInlineStyle
getBlockTree(): OrderedMap

Static Methods

静态方法

static createEmpty(?decorator): EditorState
static createWithContent(contentState, ?decorator): EditorState
static create(config): EditorState
static push(editorState, contentState, changeType): EditorState
static undo(editorState): EditorState
static redo(editorState): EditorState
static acceptSelection(editorState, selectionState): EditorState
static forceSelection(editorState, selectionState): EditorState
static moveSelectionToEnd(editorState): EditorState
static moveFocusToEnd(editorState): EditorState
static setInlineStyleOverride(editorState, inlineStyleOverride): EditorState
static set(editorState, EditorStateRecordType): EditorState

Properties

特性

Note

Use the static EditorState methods to set properties, rather than using the Immutable API directly.

注意

使用静态 EditorState 方法设置属性,比直接使用 Immutable API 要好。

allowUndo
currentContent
decorator
directionMap
forceSelection
inCompositionMode
inlineStyleOverride
lastChangeType
nativelyRenderedContent
redoStack
selection
treeMap
undoStack

Common Instance Methods

常用实例方法

getCurrentContent

getCurrentContent(): ContentState

Returns the current contents of the editor.

返回编辑器的当前内容。

getSelection

getSelection(): SelectionState

Returns the current cursor/selection state of the editor.

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

getCurrentInlineStyle

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

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.

返回一个不可变的 List ,包含被装饰和应用样式的范围。它被用来基于 currentContentdecorator 渲染,

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

在渲染时,这个对象被用来分解内容到合适的 block , decorator , 以及具有样式的范围组件中。

Static Methods

静态方法

createEmpty

static createEmpty(decorator?: DraftDecoratorType): EditorState

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

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

createWithContent

static createWithContent(
  contentState: ContentState,
  decorator?: DraftDecoratorType
): EditorState

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

返回一个新的 EditorState 对象,以提供的 ContentState 和 decorator 为基础。

create

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

static push(
  editorState: EditorState,
  contentState: ContentState,
  changeType: EditorChangeType
): 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.

提供指定的 ContentState ,返回一个新的 EditorState 对象作为新的 currentContent。以 changeType 为基础,这个 contentState 可能被视为一个撤销/重做行为的边界状态。

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

所有 EditorState 内容的变更都必须应用这个方法。

To be renamed.

即将重命名。

undo

static undo(editorState: EditorState): EditorState

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

返回一个应用了撤销栈最顶层内容的新的 EditorState 对象,作为新的 currentContent

The existing currentContent is pushed onto the redo stack.

现存的 currentContent 将被推入 redo 栈中。

redo

static redo(editorState: EditorState): EditorState

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

返回一个应用了重做栈最顶层内容的新的 EditorState 对象,作为新的 currentContent

The existing currentContent is pushed onto the undo stack.

现存的 currentContent 将被推入 undo 栈中。

acceptSelection

static acceptSelection(
  editorState: EditorState,
  selectionState: SelectionState
): EditorState

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

返回一个应用了指定的 SelectionStation 的新的 EditorState 对象,但不渲染这个 selection 。

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

举个例子,DOM selection 在我们的控制之外发生变化时,这个 API 很有用,因为这时不重复渲染是必要的。

forceSelection

static forceSelection(
  editorState: EditorState,
  selectionState: SelectionState
): EditorState

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

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

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

当 selection 应该被手动重新渲染到正确的位置,以保持对重新渲染的输出的控制时,这个 API 很有用。

moveSelectionToEnd

static moveSelectionToEnd(editorState: EditorState): EditorState

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

返回一个 selection 在末端的新的 EditorState 对象。

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

移动selection到编辑器的末端,但不强制 focus 。

moveFocusToEnd

static moveFocusToEnd(editorState: EditorState): EditorState

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

返回一个 selection 在末端并且强制 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.

在我们希望编程式的 focus 一个 input 的场景中,这个方法很有用,并且它保证了用户能够继续无缝的使用。

setInlineStyleOverride

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.

返回一个应用了指定的 DraftInlineStyle 的新的 EditorState 对象,作为下一个将要插入的字符的行内样式的设置。

set

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 对象。这个方法继承自 Immutable 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

allowUndo: boolean;
getAllowUndo()

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

在编辑器中是否允许撤销/重做行为。默认为 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.

因为撤销/重做栈是内存保留的主要资源,如果你的编辑器 UI 不需要撤销/重做行为,你可以考虑设置该项为 false

currentContent

currentContent: ContentState;
getCurrentContent()

The currently rendered ContentState. See getCurrentContent().

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

decorator

decorator: ?DraftDecoratorType;
getDecorator()

The current decorator object, if any.

当前的装饰器对象,如果有的话。

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

directionMap: BlockMap;
getDirectionMap()

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

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

You should not manage this manually.

你不应该手动管理它。

forceSelection

forceSelection: boolean;
mustForceSelection()

Whether to force the current SelectionState to be rendered.

是否强制渲染当前 SelectionState

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

你不应该手动设置这个属性 —— 见 forceSelection()

inCompositionMode

inCompositionMode: boolean;
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.

用户是否处于输入法模式。可用于给输入法用户渲染适当的 UI ,即使当前没有编辑器内容变化。你不应该手动设置这个属性。

inlineStyleOverride

inlineStyleOverride: DraftInlineStyle;
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 是一个不可变的 OrderedSet 的字符串的类型别名,其中每一个对应一个行内样式。

lastChangeType

lastChangeType: EditorChangeType;
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

nativelyRenderedContent: ?ContentState;
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不存在必须的重复渲染。

redoStack

redoStack: Stack<ContentState>;
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对象的不可变栈可以被重做操作复现。当执行一个撤销操作时,当前的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

selection: SelectionState;
getSelection()

The currently rendered SelectionState. See acceptSelection() and forceSelection().

当前渲染的SelectionState。参见acceptSelection()forceSelection()

You should not manage this property manually.

你不应该手动管理这个属性。

treeMap

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).

将被渲染进入编辑组件的,覆盖完整装饰器和样式的范围的树。这个treeMap对象以一个ContentState和一个可选的装饰器(DraftDecoratorType)为基础生成。

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

在渲染时,组件应该遍历这个treeMap对象来渲染被装饰的范围

results matching ""

    No results matching ""