索鸟网

  1. 首页
  2. Draft 文档翻译 - 快速开始 - 丰富的造型

Draft 文档翻译 - 快速开始 - 丰富的造型


丰富的造型

现在我们已经建立了顶级API的基础知识,我们可以进一步了解如何将基本的丰富样式添加到Draft编辑器。

EditorState: Yours to Command

之前的文章介绍了EditorState对象作为编辑器的完整状态的快照,由编辑器核心通过onChange prop提供。

但是,由于您的顶级React组件负责维护状态,您还可以以任何您认为合适的方式将修改应用于该EditorState对象。

对于内联和块样式行为,例如,RichUtils模块提供了许多有用的函数来帮助处理状态。

类似地,修改器模块还提供了许多常见操作,允许您应用编辑,包括对文本,样式等的更改。
该模块是一组编辑功能,它们组成更简单,更小的编辑功能,以返回所需的EditorState对象。

对于这个例子,我们将坚持使用RichUtils来演示如何在顶级组件中应用基本的丰富样式。

RichUtils和键盘命令

RichUtils提供有关Web编辑器可用的核心键盘命令的信息,如Cmd + B(粗体),Cmd + I(斜体)等)。

我们可以通过handleKeyCommand prop来观察和处理键盘命令,并将它们连接到RichUtils中以应用或删除所需的样式。

import {Editor, EditorState, RichUtils} from "draft-js";

class MyEditor extends React.Component {
    constructor(props){
        super(props);
        // 创建 editorState
        // 当 MyEditor 发生改变的时候 去重新设置 editorState
        // 在够着函数中定义一个
        this.state = {editorState: EditorState.createEmpty()}; 
        this.onChange = {editorState} => this.setState({editorState}); 
        this.handleKeyCommand = this.handleKeyCommand.bind(this);
    }
    handleKeyCommand(command) {
        const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
        if (newState) {
            this.onChange(newState);
            return "handled"
        }
        return "not-handled";
    }
    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                handlekeyCommand={this.handleKeyCommand}
                onChange={this.onChange}
            />
        )
    }
}

handleKeyCommand

提供给handleKeyCommand的命令参数是一个字符串值,即要执行的命令的名称。
这是从DOM键盘事件映射的。 有关更多信息,请参阅高级主题 - 密钥绑定,
以及为什么函数返回处理或未被处理的详细信息。

UI中的样式控件

在React组件中,您可以添加按钮或其他控件,以允许用户在编辑器中修改样式。在上面的例子中,我们使用已知的按键命令,但是我们可以添加更复杂的UI来提供这些丰富的功能。

这是一个超级基本示例,“Bold”按钮可以切换BOLD样式。

class MyEditor extends React.Component {
    //...

    _onBoldClick() {
        this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, "BOLD"));
    }

    render() {
        return (
            <div>
                <button onClick={this._onBoldClick.bind(this)}>Bold</button>
                <Editor
                    editorState={this.state.editorState}
                    handleKeyCommand={this.handleKeyCommand}
                    onChange={this.onChange}
                />
            </div>
        )
    }
}
相关标签: React.JS

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

相关教程

  • Draft 文档翻译 - 快速开始 - 概念

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

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

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

    Editor Comonent --------------- 本文讨论了核心控件contentEditable组件本身的编辑器的API和Props。 Props在DraftEditorProps中定义。 Props ===== 基础 ---- 有关介绍,请参阅API基础知识。 editorState -----------
  • Draft 文档翻译 - 高级主题 - 实体

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