阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 有所帮助。

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录