Draft.js：构建强大的React富文本编辑器

2026-01-16 10:00:23作者：柯茵沙

项目介绍

Draft.js 是一个由 Facebook 开发并维护的 JavaScript 富文本编辑器框架，专为 React 设计，并基于不可变模型构建。它提供了一套丰富的构建块，使得开发者能够轻松创建各种复杂的富文本编辑体验，从基本的文本样式到嵌入式媒体。

项目技术分析

Draft.js 的核心优势在于其与 React 的无缝集成，以及对不可变数据模型的利用。通过抽象渲染、选择和输入行为的细节，Draft.js 提供了一个直观的声明式 API。此外，它还利用了 Immutable.js 来实现功能性的状态更新和高效的数据持久化，从而确保了内存使用的可扩展性。

项目及技术应用场景

Draft.js 适用于需要富文本编辑功能的任何 React 应用场景，包括但不限于：

社交媒体平台的评论和状态输入
笔记应用
消息应用

项目特点

可扩展性和可定制性：Draft.js 提供了丰富的构建块，支持从基本文本样式到嵌入式媒体的广泛定制。
声明式富文本：与 React 完美集成，提供了一个直观的声明式 API，简化了开发过程。
不可变编辑器状态：利用 Immutable.js，确保了状态更新的功能性和数据持久化的效率。

使用指南

安装

npm install --save draft-js react react-dom

或

yarn add draft-js react react-dom

基本使用示例

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

function MyEditor() {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  );

  const editor = React.useRef(null);
  function focusEditor() {
    editor.current.focus();
  }

  return (
    <div
      style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
      onClick={focusEditor}
    >
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={setEditorState}
        placeholder="Write something!"
      />
    </div>
  );
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);