索鸟网

  1. 首页
  2. Draft 文档翻译 - API - Editor Comonent

Draft 文档翻译 - API - Editor Comonent


Editor Comonent
---------------
本文讨论了核心控件contentEditable组件本身的编辑器的API和Props。 Props在DraftEditorProps中定义。

Props
=====

    基础
    ----
    有关介绍,请参阅API基础知识。

    editorState
    -----------
    | editorState: editorState

    EditorState 对象由 Editor 创建

    onChange
    --------

    | onChange: (editorState: EditorState) => void

    但编辑器发生变化的时候,onChange函数由Editor执行。

介绍(可选)
===========

    placeholder
    -----------
    | placeholder?: string

    可选的 placeholder 字符串会被显示,但editor是空的时候。

    提示:你可以使用CSS为你的placeholder添加样式或者隐藏。例如,在富文本编辑器案例中,
    当用户在空编辑器中更改块样式时,占位符被隐藏。这是因为当样式更改时,占位符可能不会与光标对齐。

    textAlignment {对齐}
    -------------
    | textAlignment? DraftTextAlignment

    可选地为此编辑器设置覆盖文本对齐方式。 无论输入文本的默认文本方向如何,此对齐值将适用于整个内容。

    如果您希望将文本居中或将其整合到一个方向,以适应UI设计,则可以使用此选项。

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

    textDirectionality 
    ------------------
    | textDirectionality?: DraftTextDirectionality

    可选地为此编辑器设置覆盖文本的方向性。 这些值包括从右至左文本的“RTL”,
    如希伯来文或阿拉伯文,“LTR”用于从左到右的文本,如英文或西班牙文。 
    这种方向性将适用于整个内容,无论输入文本的默认文本方向如何。

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

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

    可选地设置一个函数来定义自定义块呈现。 有关使用的详细信息,请参阅高级主题:阻止组件。

    blockStyleFn
    ------------
    | blockStyleFn?: (block: ContentBlock) => string

    可选地,设置一个函数来定义要在渲染时给定块应用的类名。 有关使用的详细信息,请参阅高级主题:块样式。

    customStyleMap
    --------------
    | customStyleMap?: Object

    可选地定义内联样式的地图,以应用于具有指定样式的文本跨度。 
    有关使用的详细信息,请参阅高级主题:内联样式。

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

    可以定义一个函数来将内联样式转换为适用于跨文字的CSS对象。 
    有关使用的详细信息,请参阅高级主题:内联样式。

行为
====

    readOnly
    --------
    | readOnly?: boolean

    设置是否将编辑器呈现为静态DOM,禁用所有可编辑性。

    当在自定义块组件中支持交互或者只想显示静态用例的内容时,这非常有用。

    默认为 false;

    spellCheck 
    ----------
    | spellCheck?: boolean

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

    请注意,在OSX Safari中,启用拼写检查也会启用自动更正(如果用户已打开)。 
    还要注意,IE中始终禁用拼写检查,因为在IE中不会触发观察拼写检查事件所需的事件。

    默认为 false;

    stripPastedStyles 
    -----------------
    | stripPastedStyles?: boolean

    设置是否删除粘贴内容之外的除明文之外的所有信息。

    如果您的编辑器不支持丰富的样式,则应该使用它。

    默认为 false;

DOM和辅助功能
=============
    tabIndex 
    ARIA道具

    这些 props 允许您在编辑器上设置辅助功能属性。 
    有关支持的属性的详尽列表,请参阅DraftEditorProps。

    editorKey
    ---------
    | editorKey?: string

    您可能不会手动将EditorKey设置为<Editor />,除非您正在渲染 Draft 组件服务器端。 
    如果是这样,您必须设置此支架以避免服务器/客户端不匹配。

    如果未设置键,则当组件呈现并分配为编辑器的<DraftEditorContents />组件的支持时,
    将自动生成该键。

    如果您设置此prop,则该键应为唯一的每编辑器,因为它用于确定在编辑器中粘贴文本时是否应保留样式。

可取消处理程序
==============

    这些props function被提供以允许自定义事件处理一小的有用的事件。
    通过从处理程序返回“已处理”,您表示事件被处理,Draft核心不应该再做任何事情。 
    通过返回“未处理”,您将推迟到草稿处理事件。

    handleReturn 
    ------------
    | handleReturn?: (e: SyntheticKeyboardEvent) => DraftHandleValue

    处理RETURN keydown事件。 
    示例用法:从呈现的结果列表中选择一个提及标记,以触发将提及实体应用于您的内容。

    handleKeyCommand
    ----------------
    | handleKeyCommand?: (command: string) => DraftHandleValue

    处理命名的编辑器命令。 有关使用的详细信息,请参阅高级主题:密钥绑定。

    handleBeforeInput
    -----------------
    | handleBeforeInput?: (chars: string) => DraftHandleValue

    处理要从beforeInput事件插入的字符。 
    返回"已处理"会导致preInput事件的默认行为被阻止(即与事件上调用preventDefault方法相同)。 
    用法示例:用户键入后 - 在新块开始时,您可以将该ContentBlock转换为无序列表项。

    在Facebook上,我们还使用它将类型化的ASCII引号转换为“智能”引号,并将类型的表情符号转换为图像。

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

    处理直接粘贴到编辑器中的文本和HTML(富文本)。 返回true将阻止默认粘贴行为。

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

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

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

    处理已被拖拽到编辑器中的文件。

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

    处理其他拖拽操作。

键盘处理
========
    这些props function会暴露常见的有用的关键事件。 
    示例:在Facebook上,这些用于提供键盘交互以在输入中提及结果。

    onEscape 
    --------
    | onEscape?: (e: SyntheticKeyboardEvent) => void

    退出键

    onTab
    -----
    | onTab?: (e: SyntheticKeyboardEvent) => void

    tab键

    onUpArrow
    ---------
    | onUpArrow?: (e: SyntheticKeyboardEvent) => void

    上箭头

    onDownArrow
    -----------
    | onDownArrow?: (e: SyntheticKeyboardEvent) => void

    下箭头

鼠标事件
========
    onFocus
    | onFocus?: (e: SyntheticFocusEvent) => void

    获取焦点

    onBlur
    | onBlur?: (e: SyntheticFocusEvent) => void

    失去焦点

方法
====
    focus 
    -----
    | focus(): void

    强制获取焦点

    blur
    ----
    | blur()

    强制失去焦点
相关标签: React.JS

来源地址:http://www.imooc.com/article/19775 版权归作者所有!