当前位置：网站首页 > IT知识 > 正文

为何强烈推荐 Facebook 开源强大富文本编辑器 Draft.js ?

liuian 2024-12-30 05:16 70 浏览

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 Draft.js

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

Draft.js 是一个 JavaScript 富文本编辑器框架，专为 React 构建，并由不可变模型支持。具有以下突出特点：

可扩展且可定制：提供构建块，以实现从基本文本样式到嵌入式媒体等各种富文本编写体验。
声明性富文本：Draft.js 可无缝融入 React 应用程序，使用熟悉的声明性 API 抽象出渲染、选择和输入行为的细节。
不可变编辑器状态：Draft.js 模型使用 immutable-js 构建，提供具有功能状态更新的 API，并积极利用数据持久性来实现可扩展的内存使用。

注意：Draft.js 用于 Facebook 的生产，包括状态和评论输入、Notes 和 messenger.com。

目前 Draft.js 在 Github 通过 MIT 协议开源，有超过 22.6k 的 star、2.6k 的 fork、150k 的项目依赖量、代码贡献者 2250+、妥妥的前端优质开源项目。

如何使用 Draft.js

首先需要安装相应依赖：

npm install draft-js react react-dom babel-polyfill
// 或者
yarn add draft-js react react-dom es6-shim
npm install draft-js react react-dom
// 或者
yarn add draft-js react react-dom

Draft.js 依赖于 React 和 React DOM，因此也必须安装。下面是 Draft.js 的简单示例：

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = editorState => this.setState({editorState});
    // 注册 onChange 事件
  }
  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}
ReactDOM.render(<MyEditor />, document.getElementById('container'));

RichUtils 包含有关 Web 编辑器可用的核心按键命令的信息，例如 Cmd+B（粗体）、Cmd+I（斜体）等。

开发者可以通过 handleKeyCommand 属性观察和处理按键命令，并将它们挂接到 RichUtils 中以应用或删除所需的样式。

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

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = editorState => this.setState({editorState});
    this.handleKeyCommand = this.handleKeyCommand.bind(this);
  }

  handleKeyCommand(command, editorState) {
    const newState = RichUtils.handleKeyCommand(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}
      />
    );
  }
}

在 React 组件中，开发者还可以添加按钮或其他控件以允许用户在编辑器中修改样式。在上面的示例中使用了已知的按键命令，但可以添加更复杂的 UI 来提供这些丰富的功能。

下面是一个非常基本的示例，其中有一个 “粗体” 按钮用于切换粗体样式。

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>
    );
  }
}

Draft.js 还涵盖了很多高级主题，比如：装饰器、键绑定、管理焦点、块样式、自定义块渲染、自定义块组件、复杂内联样式、嵌套列表、文本方向、EditorState 竞争条件等等，因为篇幅问题本文不再过多展开。同时，更多关于 Draft.js 的用法和示例可以参考文末资料，本文不再过多展开。