Draft.js 快速入门及最佳实践

2026-01-17 08:20:20作者：段琳惟

1. 项目介绍

Draft.js 是一个由Facebook开发的用于React框架的富文本编辑器库。它提供了一个可扩展和定制化的平台，适用于创建各种类型丰富的文本输入体验，从基本的文本样式到嵌入媒体。Draft.js的核心特点包括：

声明式富文本：借助React，Draft.js抽象了渲染、选择和输入行为的细节，以声明式的API实现。
不可变的编辑状态：基于Immutable.js构建，提供函数式状态更新和高效的内存管理。

自2022年起，Draft.js处于维护模式，主要进行安全补丁修复。建议用户考虑转向Meta正在实验的新框架——Lexical，它提供了更佳的性能和无障碍访问。

2. 项目快速启动

安装依赖

在你的项目中安装Draft.js及相关依赖：

npm install draft-js react react-dom
# 或者
yarn add draft-js react react-dom

如果你的目标浏览器是IE11或需要额外的兼容性支持，还需要安装polyfill：

npm install babel-polyfill # 或者
yarn add es6-shim

创建编辑器组件

创建一个简单的编辑器组件：

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

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

  return (
    <div>
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={setEditorState}
        placeholder="Write something..."
      />
    </div>
  );
}

export default SimpleEditor;

确保HTML文件头含有UTF-8编码声明：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</head>
<body>
  <your-app-root-component />
</body>
</html>

3. 应用案例和最佳实践

最小高度：为了让用户有更好的视觉提示，给DraftEditor-root类设置边框和最小高度。
键盘快捷键：使用KeyBindingUtil来添加自定义键盘绑定。
装饰器(Decorators)：用于复杂文本格式化和插件实现。
数据转换：利用内置的convertToRaw和convertFromRaw将EditorState对象与其他格式间进行转换。

4. 典型生态项目

draft-js-plugins: 一系列可与Draft.js配合使用的插件库，如拼写检查、链接插入等。
draft-js-export-html: 提供将Draft.js内容导出为HTML的功能。
draft-js-import-html: 反之，可以导入HTML到Draft.js的编辑器状态中。
draft-js-utils: 辅助工具集合，方便处理Draft.js的EditorState和ContentState。

了解更多的示例和用法，可以在项目仓库的/examples目录中查看。

请注意，由于项目已进入维护模式，推荐关注Meta关于迁移到Lexical的相关进展。对于新的富文本编辑器需求，可以考虑这个替代方案。

draft-js

A React framework for building text editors.

项目地址：https://gitcode.com/gh_mirrors/dr/draft-js

登录后查看全文

项目优选

收起

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

425

376

ops-math

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Vue

1.65 K

970

Draft.js 快速入门及最佳实践

1. 项目介绍

2. 项目快速启动

安装依赖

创建编辑器组件

3. 应用案例和最佳实践

4. 典型生态项目

热门内容推荐

最新内容推荐

项目优选

Draft.js 快速入门及最佳实践

1. 项目介绍

2. 项目快速启动

安装依赖

创建编辑器组件

3. 应用案例和最佳实践

4. 典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选