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

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

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

306

131

ops-math

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

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

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

1. 项目介绍

2. 项目快速启动

安装依赖

创建编辑器组件

3. 应用案例和最佳实践

4. 典型生态项目

热门内容推荐

最新内容推荐

项目优选

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

1. 项目介绍

2. 项目快速启动

安装依赖

创建编辑器组件

3. 应用案例和最佳实践

4. 典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选