Draft.js 数据转换 API 详解：如何在富文本编辑器中实现数据持久化-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00458/article/details/148361829

Draft.js 数据转换 API 详解：如何在富文本编辑器中实现数据持久化

draft-js A React framework for building text editors. 项目地址: https://gitcode.com/gh_mirrors/dr/draft-js

前言

在现代 Web 应用中，富文本编辑器是常见的交互组件。Draft.js 作为 React 生态中的优秀富文本编辑解决方案，提供了强大的数据转换能力，使开发者能够轻松实现编辑器内容的存储与恢复。本文将深入解析 Draft.js 的数据转换 API，帮助开发者理解如何在不同格式间转换编辑器内容。

为什么需要数据转换

富文本编辑器内容通常包含复杂的结构信息：文本样式、段落格式、内嵌元素等。这些内容需要：

能够序列化为可存储/传输的格式
能够从存储状态恢复为可编辑内容
能够与其他格式（如 HTML、Markdown）互转

Draft.js 通过提供标准化的数据转换方法，解决了这些核心需求。

核心数据结构

在了解转换方法前，需要先理解 Draft.js 的两种核心数据表示形式：

ContentState：编辑器内容的运行时表示，包含完整的编辑状态
RawDraftContentState：可序列化的纯 JavaScript 对象，适合存储和传输

数据转换 API 详解

1. 序列化：convertToRaw

convertToRaw(contentState: ContentState): RawDraftContentState

功能：将编辑器内容转换为可序列化的原始对象

使用场景：

保存编辑器内容到数据库
通过 API 传输编辑器内容
生成编辑器内容的快照

示例代码：

const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState);
// 现在可以将 rawContent 存储或传输

2. 反序列化：convertFromRaw

convertFromRaw(rawState: RawDraftContentState): ContentState

功能：将原始对象转换回可编辑的 ContentState

使用场景：

从数据库加载已保存的内容
恢复之前保存的编辑状态
初始化带有预设内容的编辑器

示例代码：

// 假设 rawContent 是从存储中获取的原始数据
const contentState = convertFromRaw(rawContent);
const editorState = EditorState.createWithContent(contentState);
// 现在 editorState 可以用于初始化编辑器

3. HTML 转换：convertFromHTML

convertFromHTML(html: string): { contentBlocks: Array<ContentBlock>, entityMap: EntityMap }

功能：将 HTML 片段转换为 Draft.js 可识别的块结构和实体映射

使用场景：

从其他富文本编辑器迁移内容
导入网页内容到编辑器
实现粘贴 HTML 内容的功能

注意事项：

不是所有 HTML 标签和属性都被支持
转换结果可能需要进一步处理
样式转换可能不完全准确

完整示例：

const sampleHTML = `
  <h1>标题</h1>
  <p>段落文本 <strong>加粗</strong> 内容</p>
  <a href="https://example.com">链接示例</a>
`;

const { contentBlocks, entityMap } = convertFromHTML(sampleHTML);
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);

// 使用 editorState 初始化编辑器