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
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
andSelectionState
, and takes into account any inline style overrides that should be applied.
如果为当前ContentState
和SelectionState
插入字符,将使用内联样式值,并考虑到应用的任何内联样式重写。
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 thecurrentContent
anddecorator
.
返回一个装饰器和样式范围的Immutable List
,它用于渲染编辑器的内容,基于currentContent
和decorator
。
At render time, this object is used to break the contents into the appropriate block, decorator, and styled range components.
在渲染时,此对象用于将内容分解为适当的块、装饰器和样式范围组件。
Static Methods
createEmpty
static createEmpty(decorator?: DraftDecoratorType): EditorState
Returns a new
EditorState
object with an emptyContentState
and default configuration.
返回一个新的EditoreState
对象包含一个空的ContentState
和默认的配置。
createWithContent
static createWithContent(
contentState: ContentState,
decorator?: DraftDecoratorType
): EditorState
Returns a new
EditorState
object based on theContentState
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 specifiedContentState
applied as the newcurrentContent
. Based on thechangeType
, thisContentState
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
static undo(editorState: EditorState): EditorState
Returns a new
EditorState
object with the top of the undo stack applied as the newcurrentContent
.The existing
currentContent
is pushed onto theredo
stack.
返回一个新的EditorState
对象,应用undo
堆栈的顶部作为新的currentContent
。
现有的currentContent被推送到redo
堆栈上。
redo
static redo(editorState: EditorState): EditorState
Returns a new
EditorState
object with the top of the redo stack applied as the newcurrentContent
.The existing
currentContent
is pushed onto theundo
stack.
返回一个新的EditorState
对象,应用redo
堆栈的顶部作为新的currentContent
。
现有的currentContent
被推送到undo
堆栈上。
acceptSelection
static acceptSelection(
editorState: EditorState,
selectionState: SelectionState
): EditorState
Returns a new
EditorState
object with the specifiedSelectionState
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
static forceSelection(
editorState: EditorState,
selectionState: SelectionState
): EditorState
Returns a new
EditorState
object with the specifiedSelectionState
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
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
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
static setInlineStyleOverride(editorState: EditorState, inlineStyleOverride: DraftInlineStyle): EditorState
Returns a new
EditorState
object with the specifiedDraftInlineStyle
applied as the set of inline styles to be applied to the next inserted characters.
返回一个新的EditorState
对象,该对象应用指定的DraftInlineStyle
作为将应用于下一个插入字符的内联样式集。
set
static set(editorState: EditorState, options: EditorStateRecordType): EditorState
Returns a new
EditorState
object with new options passed in. The method is inherited from the Immutablerecord
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
allowUndo: boolean;
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
currentContent: ContentState;
getCurrentContent();
The currently rendered
ContentState
. See getCurrentContent().
返回当前渲染的ContentState
;
decorator
decorator: ?DraftDecoratorType;
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
directionMap: BlockMap;
getDirectionMap();
A map of each block and its text direction, as determined by UnicodeBidiService.
每个块及其文本方向的映射,由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.
用户是否处于IME合成模式。这对于为IME用户渲染适当的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 immutableOrderedSet
of strings, each of which corresponds to an inline style.
DraftInlineStyle
是一个Immutable
的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 thisEditorState
.
当允许本地呈现行为时,可以使用nativelyRenderedContent
属性来指示此编辑器EditorState
不需要重新render。
redoStack
redoStack: Stack<ContentState>;
getRedoStack()
An immutable stack of
ContentState
objects that can be resurrected for redo operations. When performing an undo operation, the currentContentState
is pushed onto theredoStack
.
一个不可变的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
selection: SelectionState;
getSelection();
The currently rendered
SelectionState
. See acceptSelection() and forceSelection(). You should not manage this property manually.
当前渲染的SelectionState
.看acceptSelection() 和 forceSelection() .
你不应该手动管理此属性。
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 aContentState
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
undoStack: Stack<ContentState>;
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, theContentState
is pushed onto theundoStack
. If not, the outgoingContentState
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