Draft.js 教程

🌙
手机阅读
本文目录结构

Draft.js

Draft.js 是 Facebook 开源的开发 React 富文本编辑器开发框架。和其它富文本编辑器不同,draft.js 并不是一个开箱即用的富文本编辑器,而是一个提供了一系列开发富文本编辑器的工具。本文通过开发一些简单的富文本编辑器,来介绍 draft.js 提供的各种能力。

draft.js 解决的问题

  • 统一 html 标签 contenteditable=”true”,在编辑内容时,不同浏览器下产生不同 dom 结构的问题;
  • 给 html 的改变赋予 onChange 时的监听能力;
  • 使用不可变的数据结构,每次修改都生成新的状态,保证里历史记录的可回溯;
  • 可以结构化存储富文本内容,而不需要保存 html 片段。

不可变的数据结构

这里要介绍下不可变的数据,draft.js 使用 immutable.js 提供的数据结构。draft.js 中所有的数据都是不可变的。每次修改都会新建数据,并且内存中会保存原来的状态,方便回到上一步,这里很符合 react 的单向数据流的设计思路。

Editor 组件

Draft.js 提供了一个 Editor 组件。

Editor 组件是内容呈现的载体。我们先看一个基础编辑器。

import React, {Component} from 'react';import {Editor, EditorState} from 'draft-js';
export default class extends Component {    constructor(props) {        super(props);        this.state = {
            editorState: EditorState.createEmpty()
        };
        this.onChange = editorState => {
            this.setState({editorState});
        };
    }
    render() {
        return (
            <div className="basic">
                基础编辑器
                <div className="editor">
                    <Editor
                        editorState={this.state.editorState}
                        onChange={this.onChange}/>
                </div>
            </div>
        )
    }
}

这里的 Editor 组件接收 2 个 props:editorState 是整个编辑器的状态,类似文本框的 value;onChange 监听状态改变并把新的状态传给对应的函数。初始化的时候我们使用了 EditorState 提供的 createEmpty 方法,根据语意我们很容易知道这个是生成一个没有内容的 EditorState 对象。

总结

draft.js 提供了很多丰富的功能,还有自定义快捷键等功能本文没有提及。在使用过程中,感觉主要难点在 decorator 和 entity 的理解上。希望本文能够对你了解 draft.js 有所帮助。

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

axihe
axihe
新版红宝书,最低44元! axihe 京东购买 / 天猫购买 / 图灵购买