如何将 draftjs 内容转换为 html

在 Web 开发中，Draft.js 是一种强大的富文本编辑器。而将其内容转换为 HTML 是常见的需求之一。在本文中，我们将介绍如何将 Draft.js 内容转换为 HTML。

使用 draft-js-export-html

draft-js-export-html 是一个可以从 Draft.js 转换为 HTML 的工具。您可以使用 npm 来安装它：

npm install draft-js-export-html

在你的代码中，你需要引入 draft-js 的 convertToRaw 方法和 draft-js-export-html 的 stateToHTML 方法，以便将内容从 Draft.js 转换为 HTML。

import { convertToRaw } from "draft-js";
import { stateToHTML } from "draft-js-export-html";

const contentState = editorState.getCurrentContent();
const rawContentState = convertToRaw(contentState);

const markup = stateToHTML(rawContentState);

您可以看到上面的代码，我们首先获取了 Draft.js 编辑器的内容状态（contentState），然后将其转换为纯文本的 JavaScript 对象（rawContentState）。

接下来，我们调用 stateToHTML 方法来将 rawContentState 转换为 HTML 字符串，这个字符串就是我们要返回的内容。

使用 html-to-draftjs

如果您要将 HTML 转换回 Draft.js 的内容状态，则可以使用 html-to-draftjs 工具。您可以使用 npm 来安装它：

npm install html-to-draftjs

与上面类似，您需要引入 draft-js 的 convertFromRaw 方法和 html-to-draftjs 的 convertToContentState 方法，以便将 HTML 转换为 Draft.js 内容状态。

import { convertFromRaw } from "draft-js";
import { convertToContentState } from "html-to-draftjs";

const contentState = convertToContentState("<p>Hello, world!</p>");
const editorState = EditorState.createWithContent(contentState);

您可以看到上面的代码，我们首先将 HTML 转换为 contentState，然后使用 EditorState.createWithContent() 方法将其转换为编辑器状态（editorState）。

总结

在本文中，我们介绍了如何使用 draft-js-export-html 和 html-to-draftjs 工具来转换 Draft.js 内容和 HTML。这两个工具是非常简单和易于使用的，它们可以大大简化您的富文本编辑器开发工作。