Editor Component

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

本文讨论了核心控件的API和支柱组件(即Editor)本身。Props定义在DraftEditorProps中。

Props

Basics

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.

编辑器在发生编辑和选择更改时要执行的onChange函数。

Presentation (Optional)

placeholder

placeholder?: string

Optional placeholder string to display when the editor is empty.

当编辑器为空时显示的可选占位符字符串。

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设置样式或隐藏占位符。例如，在富编辑器示例中，当用户在空编辑器中更改块样式时，占位符将被隐藏。这是因为当样式改变时，占位符可能不会与光标对齐。

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.

如果未设置此值，文本对齐方式将基于编辑器中的每个块的字符。

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”和从左到右的文本(如英语或西班牙语)的“LTR”。这种方向性将应用于整个内容，而不管输入文本的默认文本方向。

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

如果未设置此值，则文本方向将基于编辑器中的每个块的字符。

blockRendererFn

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

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

可选地设置一个函数来定义自定义块渲染。有关使用的详细信息，请参阅Advanced Topics: Block Components 。

blockRendererMap

blockRendererMap?: DraftBlockRenderMap

Provide a map of block rendering configurations. Each block type maps to element tag and an optional react element wrapper. This configuration is used for both rendering and paste processing. See Advanced Topics: Custom Block Rendering for details on usage.

提供块渲染配置的映射。每个块类型映射到元素标记和一个可选的react元素包装器。此配置用于渲染和粘贴处理。有关使用的详细信息，请参阅Advanced Topics: Custom Block Rendering。

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.

可选地设置一个函数来定义类名，以便在渲染给定块类型时将其应用于该块类型。有关使用的详细信息，请参阅Advanced Topics: Block Styling 。

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.

可选地定义内联样式映射，以应用于具有指定样式的文本范围。有关使用的详细信息，请参阅 Advanced Topics: Inline Styles。

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对象。有关使用的详细信息，请参阅 Advanced Topics: Inline Styles 。

Behavior (Optional)

autoCapitalize

autoCapitalize?: string

Set if auto capitalization is turned on and how it behaves. More about platform availability and usage can be found on mdn.

设置是否开启自动大写以及其如何执行的。关于平台可用性和使用的更多信息可以在mdn上找到。

autoComplete

autoComplete?: string

Set if auto complete is turned on and how it behaves. More about platform availability and usage can be found on mdn.

设置是否开启自动完成和其如何执行。关于平台可用性和使用的更多信息可以在mdn上找到。

autoCorrect

autoCorrect?: string

Set if auto correct is turned on and how it behaves. More about platform availability and usage can be found on MDN.

设置是否开启自动更正以及其如何执行。关于平台可用性和使用的更多信息可以 be found on MDN。

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

tabIndex

ARIA props

这些props允许您在编辑器上设置可访问性属性。有关支持的属性的详细列表，请参见DraftEditorProps。

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.

您可能不会手动在编辑器上设置editorKey，除非您正在渲染一个Draft组件在服务器端。如果是，则必须设置此props以避免服务器/客户端渲染不匹配。

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.

如果没有设置该键，则在组件渲染时自动生成该键，并将其指定为编辑器的<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.

如果您确实设置了这个prop，那么每个编辑器的键值应该是唯一的，因为它用于确定在编辑器内粘贴文本时是否应该保留样式。

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.

提供这些prop函数是为了允许对一小组有用的事件进行自定义事件处理。通过从你的事件处理程序中返回'handled',您指示事件已被处理，而Draft core不应该再对其进行任何操作。通过返回'not-handled',你听从Draft去处理事件。

handleReturn

handleReturn?: (
  e: SyntheticKeyboardEvent,
  editorState: EditorState,
) => 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,
  editorState: EditorState,
  eventTimeStamp: number,
) => DraftHandleValue

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

处理编辑器命名的按键绑定命令。有关使用的详细信息，请参阅 Advanced Topics: Key Bindings。

handleBeforeInput

handleBeforeInput?: (
  chars: string,
  editorState: EditorState,
  eventTimeStamp: number,
) => 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.

处理要从 beforInput事件被添加进入的字符的事件。返回'handled'会造成默认的beforeInput事件被阻止(也就是说，它与在事件上调用preventDefault方法是一样的)。示例用法:在用户键入-在新块的开始处，您可以将该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,
  editorState: EditorState,
) => 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)

Draft lets you supply a custom keyDown handler that wraps or overrides its default one.

Draft允许您提供一个自定义keyDown处理程序，该处理程序包装或覆盖其默认处理程序。

keyBindingFn

keyBindingFn?: (e: SyntheticKeyboardEvent) => ?string

This prop function exposes keyDown events to a handler of your choosing. If an event of interest happens, you can perform custom logic and/or return a string corresponding to a DraftEditorCommand or a custom editor command of your own creation. Example: At Facebook, this is used to provide keyboard interaction for the mentions autocomplete menu that appears when typing a friend’s name. You can find a more detailed explanation of this here.

这个prop函数将keyDown事件公开给您选择的处理程序。如果发生了重要的事件,您可以执行自定义逻辑和/或返回与您自己创建的DraftEditorCommand或自定义编辑器命令相对应的字符串。例如:在Facebook，这是用来提供键盘互动的提及自动完成菜单，当输入一个朋友的名字时出现。你可以在这里找到更详细的解释。

Mouse events

onFocus

onFocus?: (e: SyntheticFocusEvent) => void

onBlur

onBlur?: (e: SyntheticFocusEvent) => void

Methods

focus

focus(): void

Force focus back onto the editor node.

强制焦点聚焦到编辑器节点。

blur

blur(): void

Remove focus from the editor node.

强制从编辑器节点中移除焦点。