draft-js内容转换：HTML与Raw格式的双向转换技术-html-CSS教程网

draft-js内容转换：HTML与Raw格式的双向转换技术

【免费下载链接】draft-js A React framework for building text editors. 项目地址: https://gitcode.***/gh_mirrors/dra/draft-js

你是否在开发富文本编辑器时遇到过内容持久化难题？是否为如何在HTML与编辑器内部格式间无缝转换而困扰？本文将带你掌握draft-js的核心数据转换技术，轻松实现HTML与Raw格式的双向转换，解决编辑器内容的存储与展示问题。

读完本文，你将能够：

理解draft-js的数据转换核心流程
掌握HTML到ContentState的转换方法
学会ContentState与Raw格式的相互转换
运用转换技术实现编辑器内容的持久化

转换技术概述

draft-js作为一款React框架的富文本编辑器解决方案，采用了独特的ContentState数据结构来管理编辑器内容。为实现内容的持久化存储和传输，draft-js提供了完善的转换机制，主要涉及两种转换方向：

HTML与ContentState的转换：用于从外部HTML内容加载到编辑器，或从编辑器导出HTML内容
ContentState与Raw格式的转换：用于内容的存储和传输

核心转换API集中在docs/APIReference-Data-Conversion.md中定义，主要包括convertFromHTML、convertFromRaw和convertToRaw三个关键方法。

HTML到ContentState的转换

将HTML内容导入到draft-js编辑器是最常见的需求之一。draft-js提供了convertFromHTML工具函数来处理这一转换过程。

基础用法

const sampleMarkup = '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.example.***">Example link</a><br /><br/ >' +
  '<img src="image.png" height="112" width="200" />';

const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap,
);

this.state = {
  editorState: EditorState.createWithContent(state),
};

上述代码片段来自examples/draft-0-10-0/convertFromHTML/convert.html，展示了如何将HTML字符串转换为编辑器可识别的ContentState对象。

转换原理

convertFromHTML函数的核心实现位于src/model/encoding/convertFromHTMLToContentBlocks.js文件中，主要通过以下步骤完成转换：

HTML解析：将HTML字符串解析为DOM树结构
块级元素处理：将HTML块级元素转换为ContentBlock对象
内联样式处理：识别并转换HTML中的内联样式（如<b>、<i>等标签）
实体处理：将链接、图片等转换为draft-js的Entity对象
字符元数据生成：为每个字符生成包含样式和实体信息的CharacterMetadata

该过程中会使用HTMLTagToRawInlineStyleMap映射表将HTML标签转换为draft-js的内联样式：

const HTMLTagToRawInlineStyleMap: Map<string, string> = Map({
  b: 'BOLD',
  code: 'CODE',
  del: 'STRIKETHROUGH',
  em: 'ITALIC',
  i: 'ITALIC',
  s: 'STRIKETHROUGH',
  strike: 'STRIKETHROUGH',
  strong: 'BOLD',
  u: 'UNDERLINE',
  mark: 'HIGHLIGHT',
});

ContentState与Raw格式的转换

Raw格式是draft-js用于内容持久化的JSON格式表示，通过convertToRaw和convertFromRaw两个方法实现与ContentState的双向转换。

ContentState转换为Raw格式

当需要保存编辑器内容时，可使用convertToRaw将ContentState转换为普通JavaScript对象：

const content = editorState.getCurrentContent();
const rawContent = convertToRaw(content);
// 将rawContent保存到数据库或发送到服务器
console.log(rawContent);

这一转换过程的实现位于src/model/encoding/convertFromDraftStateToRaw.js，主要完成以下工作：

块数据编码：将BlockNode转换为包含文本、样式和实体信息的原始对象
内联样式范围编码：将字符样式信息编码为范围描述
实体范围编码：将实体引用编码为范围描述
实体映射生成：收集所有实体信息并生成实体映射表

Raw格式转换为ContentState

从存储中加载内容时，使用convertFromRaw将Raw格式转换回ContentState：

const rawContent = JSON.parse(savedContent);
const contentState = convertFromRaw(rawContent);
const editorState = EditorState.createWithContent(contentState);

这一转换过程的实现位于src/model/encoding/convertFromRawToDraftState.js，主要步骤包括：

实体解码：重建实体映射表
块数据解码：将原始块数据转换为ContentBlock对象
字符列表生成：重建包含样式和实体信息的CharacterMetadata列表
BlockMap构建：创建有序的块映射表

完整转换流程示例

以下是一个完整的内容加载、编辑和保存的流程示例，整合了HTML和Raw格式的转换技术：

// 1. 从HTML加载内容
const blocksFromHTML = convertFromHTML(initialHTML);
const initialContent = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap,
);

// 2. 初始化编辑器状态
this.state = {
  editorState: EditorState.createWithContent(initialContent),
};

// 3. 用户编辑...

// 4. 保存时转换为Raw格式
saveContent = () => {
  const content = this.state.editorState.getCurrentContent();
  const rawContent = convertToRaw(content);
  // 发送到服务器保存
  fetch('/save-content', {
    method: 'POST',
    body: JSON.stringify(rawContent),
    headers: {'Content-Type': 'application/json'},
  });
};

// 5. 从服务器加载时
loadContent = async () => {
  const response = await fetch('/load-content');
  const rawContent = await response.json();
  const contentState = convertFromRaw(rawContent);
  this.setState({
    editorState: EditorState.createWithContent(contentState),
  });
};

注意事项与最佳实践

实体处理：转换过程中要注意实体的正确映射，特别是链接和图片等媒体实体
性能考量：对于大型文档，转换操作可能会影响性能，建议在Web Worker中执行
兼容性：不同版本的draft-js可能存在Raw格式差异，升级时需注意兼容性
错误处理：转换过程中可能会遇到格式错误，建议添加适当的错误处理机制

总结

draft-js提供的HTML与Raw格式转换技术是实现富文本编辑器内容持久化的核心。通过convertFromHTML、convertToRaw和convertFromRaw三个关键方法，我们可以轻松实现编辑器内容与外部格式的双向转换。

掌握这些转换技术，你可以：

从现有HTML内容无缝迁移到draft-js编辑器
将编辑器内容保存为结构化的Raw格式
在服务器和客户端之间高效传输编辑器内容

建议深入阅读官方文档docs/APIReference-Data-Conversion.md和相关源代码，以更好地理解转换过程并处理复杂场景。

点赞收藏本文，关注更多draft-js高级技巧分享！

【免费下载链接】draft-js A React framework for building text editors. 项目地址: https://gitcode.***/gh_mirrors/dra/draft-js

转载请说明出处内容投诉
CSS教程网 » draft-js内容转换：HTML与Raw格式的双向转换技术

xingchi

分享到：