注意：本文需要有一定的前端开发基础，并熟悉 React 和 Draft.js 的使用。
简介
infinity-draft-js 是一个基于 Draft.js 封装的 React 组件库，可以快速的建立一个支持富文本编辑的组件。它提供了丰富的编辑器组件及插件，可以极大地方便前端开发者操作富文本。
安装和使用
可以使用 npm 或者 yarn 进行安装。在项目中使用时，需要先引入 infinity-draft-js 的样式文件。
--- ------- ----------------- ------
------ ----------------------------------- ------ - ------ - ---- --------------------
在项目中渲染组件时，需要定义一些必须的配置项。下面是一个简单的例子。
------ ------ - -------- - ---- --------
------ - ------- -------- ----- - ---- --------------------
------ -----------------------------------
----- --- - -- -- -
----- ------------- --------------- - -------------------------------
----- -------------- - ------------- -- -
----------------------------
--
------ -
-----
-------- --
------ --
-------
-------------------------
-------------------------
--
------
--
--
------ ------- ----最后我们可以得到一个基本的富文本编辑器的样式如下图所示。
组件的 API
infinity-draft-js 也提供了很多可供设置的 API，比如：Editor、Panel、Toolbar、Element 和 Inline，下面是这些组件的介绍和细节。
Editor
Editor 组件是核心的 Rich Text 编辑器，并作为包装了 Draft.js 的组件。当通过键盘或鼠标输入文本时，它会调用 onChange 回调函数，并对 EditorState 进行更新。同时也会将更新后的内容传递给 Editor 组件的 editorState 属性。
Editor 组件除了通过上面的例子引入，还可以通过以下方式进行渲染。
------ - ------ - ---- -------------------- ------- ------------------------- ------------------------- ------------ --------------- ------------------- ------------------- ---------------- -- --- ---------------- -- --- -------------------- -- --- -------------------- -- --- ---------------- -- --- --------------------- -- --- ---------------- -------------- ----------------- ------------------------- ------------------------- ------------------------- -------------------------- --------------------- ----------------- ------------------ ------------------------- ------------------- ------------------ --------------- ------------ -------------------- ---------------------- ------- ----- -------------------- ----------- -- --- ---------- -- --- ----------------------- -- --- --
在这里，editorState 属性表示输入的内容， onChange 属性表示当输入内容通过编辑器插入到 DOM 中时回调的方法。还可以设置其他可选的属性，比如：plugins 用来添加插件， blockRenderMap 用来定义块渲染器的列表等。
Panel
Panel 组件是辅助面板，用于展示 React 组件或 HTML 元素，可以用于扩展编辑器的 UI。
------ - ----- - ---- -------------------- ------- ------------ --------------- --------
Toolbar
Toolbar 组件是一个默认的工具栏，提供了常用的 Bold、Italic、Underline、Link、Ordered List 和 Unordered List 等工具按钮，并且 infinity-draft-js 也提供了使用自定义功能按钮的功能。
------ - ------- - ---- --------------------
--------
----------------
-
----- --- --------
-------- -- -- ---
--
--
---------------------------- --------
--------------------------- --------
--Element
Element 组件表示 Draft.js 内容的块元素，并且可以自定义样式。
------ - ------- - ---- -------------------- -------- -------------- --------------- ------- ------------- ----------- -- --- ------------ - ------- ---- ----------
在这里， inline 属性表示这个组件是否是内联元素， element 属性表示要渲染的元素的类型，type 属性表示对应的 entity 类型。
Inline
Inline 组件则表示 Draft.js 内容的行内元素，并也可以自定义样式。
------ - ------ - ---- -------------------- ------- ---------------- ------- ----------- -- --- ------------ - ------- ---- ---------
在这里， element 属性表示要渲染的元素的类型，type 属性表示对应的 entity 类型。
结语
综合看来，infinity-draft-js 是一个非常好的富文本编辑器库，它不仅具有功能强大的富文本编辑功能，还有良好的兼容性，并且需要配置的属性和方法也更加的自定义和丰富，非常适合需要构建富文本编辑器的项目。在使用 infinity-draft-js 时，建议先看一下官方文档，结合具体的项目需求再做选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5751ab1864dac66d3a