前言
随着移动互联网的发展，Web 前端技术正变得愈发重要。作为 Web 应用的入口，前端成为了极其重要的一环。而在前端技术中，“可编辑富文本编辑器”作为 Web 开发者不可或缺的工具之一，它能够让用户在页面上像使用 Word 一样方便地编辑文本，实现更友好的交互体验。
在 React 生态中，使用 Draft.js 构建可编辑的富文本编辑器变得越来越流行。Draft.js 的优点在于灵活、可定制、易于维护，但它的基本单位是 Draft.js 的 ContentState，这使得使用 Markdown 写作变得不容易。在很多场景下，我们更喜欢使用 Markdown 来编写文本内容。因此，为了能在 Draft.js 编辑器中使用 Markdown 内容，我们需要借助 npm 包 dox-draft-js-import-markdown。
dox-draft-js-import-markdown 是一个可以将 Markdown 转化为 Draft.js ContentState 对象的工具包。它支持转化粗体、斜体、块引用、代码块、有序列表、无序列表、标题、删除线、超链接等大部分 Markdown 语法。
下面，本文将介绍 dox-draft-js-import-markdown 转化 Markdown 的具体用法。
安装
在你的 React 项目中，通过使用 npm 来安装 dox-draft-js-import-markdown：
npm install dox-draft-js-import-markdown
这将会在你的项目中安装所有需要的代码库和依赖项。
使用
首先，导入 dox-draft-js-import-markdown：
import convertToDraftjs from 'dox-draft-js-import-markdown';
然后，定义一个将要被转换为 Draft.js ContentState 的 Markdown 内容：
-- -------------------- ---- -------
----- --------------- - -
- ------
-- ------
----------------
- -----
-----
- -----
- -----
-- -----
-- -----
-------------
-------------------------------
--最后，调用 dox-draft-js-import-markdown 转换 Markdown 为 Draft.js ContentState：
const contentState = convertToDraftjs(markdownContent);
此时 contentState 已经是一个标准的 Draft.js ContentState 对象了，可以被直接传递给 Draft.js 编辑器使用。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----------- - ---- -----------
------ ---------------- ---- -------------------------------
----- -------------- ------- --------------- -
------------------ -
-------------
---------- - - ------------ ------------------------- --
------------- - ----------- -- --------------- ----------- ---
----- --------------- - -
- ------
-- ------
----------------
- -----
-----
- -----
- -----
-- -----
-- -----
-------------
-------------------------------
--
----- ------------ - ----------------------------------
---------------------- - --------------------------------------------
-
-------- -
------ ------- ------------------------------------ ------------------------ ---
-
-总结
dox-draft-js-import-markdown 是一个非常实用的 npm 包。它使得在 React 项目中使用 Draft.js 富文本编辑器和 Markdown 编辑器变得非常容易。通过学习本文内容，你已经可以使用 dox-draft-js-import-markdown 将 Markdown 内容转换为 Draft.js ContentState 对象，并在 Draft.js 编辑器中愉快地编辑你的 Markdown 文本了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005623c81e8991b448df864