索鸟网

  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 版权归作者所有!

相关教程

  • Draft 文档翻译 - API - EditorState

    EditorState =========== EditorState 是 editor 顶级的state对象 它是一个不可变的记录,代表Draft编辑器的整个状态, 包括: 1. 当前文本内容状态 2. 当前选择状态 3. 内容完整的表示形式 4. 撤消/重做堆栈 5.
  • Draft 文档翻译 - API - ContentState

    ContentState ============ ContentState是一个Immutable Record,代表整个 state 包括: 1. 编辑器的实体内容: 文本,块,内联样式以及实体范围。 2. 编辑器的两个 selection states, 渲染之前的 selection 和渲染之后的 selection
  • Draft 文档翻译 - API - EditorChangeType

    EditorChangeType ================ EditorChangeType是一个枚举,列出了可以处理Draft模型的可能的更改操作集。 它被表示为流类型,作为字符串的并集。 它作为参数传递给 EditorState.push,并表示通过转换到新的ContentState来执行的更改操作的类型。 在幕后,此值
  • Draft 文档翻译 - 快速开始 - 基础API

    基础API 本文档概述了Draft API的基础知识。 一个工作的例子也可以跟随。 受控输入 React组件 Editor 构建为受控的ContentEditable组件, 其目标是提供一个基于熟悉的React控制输入API建模的顶级API。 作为一个简短的回顾,控制输入涉及两个关键因素: 1.用于表示输入状态的值 2.一个onChange支持功能来接收输入的更
  • Draft 文档翻译 - 高级主题 - Decorators

    Decorators 内联样式和块级样式都不是只是我们想要添加到编辑富中的富内容。例如,Facebook评论输入提供了蓝色背景亮点,用于提及和标签。 为了支持自定义富文本的灵活性,草稿提供了一个“装饰器”系统。推特示例提供了一个现实的装饰器的例子。 (“装饰器是用来添加高级富内容的一种方法”) CompositeDecorator 扫描给定的内容块 满足定义的
  • Draft 文档翻译 - 高级主题 - 实体

    实体(处理内容中的富数据) 本文讨论了实体系统,该Draft用于使用元数据对文本的范围进行注释。 实体使工程师能够向编辑人员介绍超越样式文本的丰富程度。链接,提及和嵌入式内容都可以使用实体来实现。 (文本中会有许多高级的元数据,实体就是用于表示这些元数据,使得我们可以在内容中添加链接,图片,等) 在Draft知识库中,“链接编辑器”和“实体演示”提供实时代码示例,以
  • Draft 文档翻译 - 快速开始 - 概念

    概观 Draft.js是在React中构建丰富的文本编辑器的框架,由不可变模型提供支持,并且提取跨浏览器的差异。 Draft.js可以轻松构建任何类型的富文本输入,无论您只是想支持一些内联文本样式,还是构建一个复杂的文本编辑器来构成长篇文章。 安装 Darft.js 通过npm安装。它依赖于 React React-dom npm install --s
  • Draft 文档翻译 - 高级主题 - 嵌套列表

    嵌套列表 Draft框架提供对嵌套列表的支持,如Facebook Notes编辑器中所示。 在那里,您可以使用Tab和Shift + Tab添加或删除列表项的深度。 RichUtils模块提供了一种方便的onTab方法来管理此行为,并且对于大多数嵌套列表需求应该是足够的。 您可以在编辑器上使用onTab支架来利用此实用程序。 默认情况下,样式应用于列表项,以通过Dr