Editor 组件

This article discusses the API and props of the core controlled contentEditable component itself, Editor. Props are defined within DraftEditorProps.

本文讨论了控制内容编辑的核心组件： Editor，它本身的 API 和 props 。Props 被定义在 DraftEditorProps中。

Props

基础

See API Basics for an introduction.

查阅 API 基础 获取介绍。

editorState

editorState: EditorState

The EditorState object to be rendered by the Editor.

被 Editor 所渲染的 EditorState 对象

onChange

onChange: (editorState: EditorState) => void

The onChange function to be executed by the Editor when edits and selection changes occur.

当编辑和光标选择改变时，被 Editor 执行的 onChange 方法。

展示（可选）

placeholder

placeholder?: string

Optional placeholder string to display when the editor is empty.

可选的 placeholder 字符串，在编辑器为空时展示。

Note: You can use CSS to style or hide your placeholder as needed. For instance, in the rich editor example, the placeholder is hidden when the user changes block styling in an empty editor. This is because the placeholder may not line up with the cursor when the style is changed.

提醒：你可以使用 CSS 来装饰或隐藏你的 placeholder ，如果有必要的话。比如，在 这个富文本编辑器例子 中，placeholder 在用户改变了空编辑器中的 block 样式时隐藏了。这是因为 placeholder 不需要在样式改变时和光标同步。

textAlignment

textAlignment?: DraftTextAlignment

Optionally set the overriding text alignment for this editor. This alignment value will apply to the entire contents, regardless of default text direction for input text.

可选的 设置此编辑器的文本对齐方式。这个对齐值会应用在整个内容上，忽略默认的文本方向。

You may use this if you wish to center your text or align it flush in one direction to fit it within your UI design.

如果你希望让你的文字居中或者对齐到一个方向，以匹配你的 UI 设计，你可以使用此选项。

If this value is not set, text alignment will be based on the characters within the editor, on a per-block basis.

如果这个值没有被设置，文本对齐方式将基于编辑器中的字符，以每一个 block 为基础。

textDirectionality

textDirectionality?: DraftTextDirectionality

Optionally set the overriding text directionality for this editor. The values include 'RTL' for right-to-left text, like Hebrew or Arabic, and 'LTR' for left-to-right text, like English or Spanish. This directionality will apply to the entire contents, regardless of default text direction for input text.

可选的 设置此编辑器的文字方向。该值包括从右往左的 “RTL” ，如 Hebrew 和 Arabic，和从左往右的 “LTR” ，如英语和西班牙语。这个方向会应用在整个内容上，忽略默认的文字方向。

If this value is not set, text directionality will be based on the characters within the editor, on a per-block basis.

如果这个值没有被设置，文字方向将基于编辑器中的字符，以每一个 block 为基础。

blockRendererFn

blockRendererFn?: (block: ContentBlock) => ?Object

Optionally set a function to define custom block rendering. See Advanced Topics: Block Components for details on usage.

可选的 设置一个方法来规定自定义的 block 渲染。参见 进阶话题：块组件 来获取更多使用细节。

blockStyleFn

blockStyleFn?: (block: ContentBlock) => string

Optionally set a function to define class names to apply to the given block when it is rendered. See Advanced Topics: Block Styling for details on usage.

可选的 设置一个方法来定义在block被渲染时所应用的类名。参见 进阶话题：块级样式 来获取更多使用细节。

customStyleMap

customStyleMap?: Object

Optionally define a map of inline styles to apply to spans of text with the specified style. See Advanced Topics: Inline Styles for details on usage.

可选的 定义一个内联样式的 map ，这个 map 会把明确的样式应用到文字的 span 上。参见 进阶话题：内联样式 获取更多使用细节。

customStyleFn

customStyleFn?: (style: DraftInlineStyle, block: ContentBlock) => ?Object

Optionally define a function to transform inline styles to CSS objects that are applied to spans of text. See Advanced Topics: Inline Styles for details on usage.

可选的 定义一个方法来转换内联样式到 CSS 对象以应用到文字的 span 上。参见 进阶话题：内联样式 来获取更多使用细节。

Behavior (Optional)

行为（可选）

readOnly

readOnly?: boolean

Set whether the editor should be rendered as static DOM, with all editability disabled.

设置编辑器是否应该以不可编辑的静态DOM的形式被渲染。

This is useful when supporting interaction within custom block components or if you just want to display content for a static use case.

在支持 自定义块级组件 的交互，或仅仅想展示一个静态用例的内容时，该属性很有用。

Default is false.

默认为 false。

spellCheck

spellCheck?: boolean

Set whether spellcheck is turned on for your editor.

设置你的编辑器是否打开拼写检查。

Note that in OSX Safari, enabling spellcheck also enables autocorrect, if the user has it turned on. Also note that spellcheck is always disabled in IE, since the events needed to observe spellcheck events are not fired in IE.

注意，在 OSX 的 Safari 中，如果用户开启了自动修正功能，开启拼写检查也会开启自动修正。同时请注意拼写检查在 IE 中时始终不可用的，因为这个事件需要观察的拼写检查事件在 IE 中并不支持。

Default is false.

默认为 false。

stripPastedStyles

stripPastedStyles?: boolean

Set whether to remove all information except plaintext from pasted content.

设置是否删除除了明文之外的所有信息。

This should be used if your editor does not support rich styles.

如果你的编辑器不支持富文本样式，应该使用这个属性。

Default is false.

默认为 false

DOM and Accessibility (Optional)

DOM 和 可访问性（可选）

tabIndex

ARIA props

These props allow you to set accessibility properties on your editor. See DraftEditorProps for the exhaustive list of supported attributes.

这些属性允许你为编辑器设置可访问性原型。看到支持的属性的详细列表drafteditorprops。查阅 Draft 编辑器属性 获取支持属性的详细列表。

editorKey

editorKey?: string

You probably won't set editorKey on an <Editor /> manually unless you're rendering a Draft component serverside. If you are, you must set this prop to avoid server/client mismatches.

你可能不会在一个 <Editor/> 上手动设置 editorKey ，除非你在服务器端渲染一个 Draft 组件。如果是这样，你必须设置这个属性来避免服务器端/客户端不匹配。

If the key is not set, it is generated automatically when the component renders and assigned as a prop of the Editor's <DraftEditorContents /> component.

如果这个 key 没有被设置，它会在组件渲染时自动生成，并作为一个属性分配到编辑器的 <DraftEditorContents/> 组件上。

If you do set this prop, the key should be unique per-editor, as it is used to determine if styles should be preserved when pasting text within an editor.

如果你设置了这个属性，每个编辑器的 key 应该是唯一的，因为它决定了在粘贴文本进编辑器时，样式是否应该被保留。

Cancelable Handlers (Optional)

可撤销的处理器（可选）

These prop functions are provided to allow custom event handling for a small set of useful events. By returning 'handled' from your handler, you indicate that the event is handled and the Draft core should do nothing more with it. By returning 'not-handled', you defer to Draft to handle the event.

这些属性方法被提供用来允许编辑器自定义一小部分有用的事件的处理。通过从处理器返回 “handled” ，表明了这个事件已经被处理，并且 Draft 核心应该不再对它做任何事。通过返回 “not-handled” ，按照 Draft 默认的处理这个事件。

handleReturn

handleReturn?: (e: SyntheticKeyboardEvent) => DraftHandleValue

Handle a RETURN keydown event. Example usage: Choosing a mention tag from a rendered list of results to trigger applying the mention entity to your content.

处理一个 RETURN 按键事件。示例用法：从一个被渲染的结果列表选择一个提及（@）标签来触发应用提及（@）实体到你的内容上的行为。

handleKeyCommand

handleKeyCommand?: (command: string) => DraftHandleValue

Handle the named editor command. See Advanced Topics: Key Bindings for details on usage.

处理被命名的编辑器指令。参见 进阶话题：按键绑定 获取更多使用细节。

handleBeforeInput

handleBeforeInput?: (chars: string) => DraftHandleValue

Handle the characters to be inserted from a beforeInput event. Returning 'handled' causes the default behavior of the beforeInput event to be prevented (i.e. it is the same as calling the preventDefault method on the event). Example usage: After a user has typed - at the start of a new block, you might convert that ContentBlock into an unordered-list-item.

从一个 beforeInput 事件中处理被插入的字符。返回 ”handled“ 会引起 beforeInput 事件的默认行为被阻止。（相似于事件的 preventDefault 方法 ）。示例用法：用户在一个新的 block 的开始位置输入- 时，你可以把 ContentBlock 转换成一个 unordered-list-item 。

At Facebook, we also use this to convert typed ASCII quotes into "smart" quotes, and to convert typed emoticons into images.

在Facebook，我们也使用它来把输入的 ASCII 引号转换成”智能的“引号，以及把输入的表情符转换成图片。

handlePastedText

handlePastedText?: (text: string, html?: string) => DraftHandleValue

Handle text and html(for rich text) that has been pasted directly into the editor. Returning true will prevent the default paste behavior.

处理被直接粘贴到编辑器的文字和 html （富文本）。返回 true 会阻止默认的粘贴行为。

handlePastedFiles

handlePastedFiles?: (files: Array<Blob>) => DraftHandleValue

Handle files that have been pasted directly into the editor.

处理被直接粘贴到编辑器的文件。

handleDroppedFiles

handleDroppedFiles?: (selection: SelectionState, files: Array<Blob>) => DraftHandleValue

Handle files that have been dropped into the editor.

处理被拖拽入编辑器的文件。

handleDrop

handleDrop?: (selection: SelectionState, dataTransfer: Object, isInternal: DraftDragType) => DraftHandleValue

Handle other drop operations.

处理其他拖入操作。

Key Handlers (Optional)

按键处理器（可选）

These prop functions expose common useful key events. Example: At Facebook, these are used to provide keyboard interaction for mention results in inputs.

这些属性方法暴露了常见的有用的按键事件。示例：在 Facebook ，这些方法被用来提供输入中提及（@）的结果的键盘交互。

onEscape

onEscape?: (e: SyntheticKeyboardEvent) => void

onTab

onTab?: (e: SyntheticKeyboardEvent) => void

onUpArrow

onUpArrow?: (e: SyntheticKeyboardEvent) => void

onDownArrow

onDownArrow?: (e: SyntheticKeyboardEvent) => void

Methods

focus

focus(): void

Force focus back onto the editor node.

强制让焦点返回到编辑器节点上。

blur

blur(): void

Remove focus from the editor node.

从编辑器节点上移除焦点。