简介
在前端开发中，经常会使用富文本编辑器实现富文本输入和展示。而 Draft.js 是一款由 Facebook 开发的可定制的富文本编辑器框架，方便开发者高效地构建自定义富文本编辑器，插件化的思路使得可以使用插件去扩展编辑器的功能，其中包括但不限于：拼写检查、代码高亮、LaTex 支持、Markdown 支持、Markdown 渲染等等。
作为一款插件化富文本编辑器框架，Draft.js 并不是一款完整可用的富文本编辑器软件，需要我们开发者在不断地进行插件开发和完善来满足具体项目需求。在这里，本文将介绍如何使用一个名为 plugined-draft-js-editor 的 npm 包来快速构建一个拥有丰富特性的 Draft.js 富文本编辑器。
安装
使用 plugined-draft-js-editor 首先需要保证本地已经安装了 Draft.js 并且生成了可供使用的 editorState。可以参考这篇博客——Getting Started with Draft.js 来完成 Draft.js 的安装。
接下来，在项目中执行以下命令安装 plugined-draft-js-editor：
npm install plugined-draft-js-editor --save
或者使用 yarn 安装：
yarn add plugined-draft-js-editor
可以在 package.json 中找到安装成功的 plugined-draft-js-editor 包。
使用
导入模块
在页面需要使用 plugined-draft-js-editor 的地方，可以按以下方式导入模块：
import { Editor } from 'plugined-draft-js-editor';
// 此处的 { Editor } 可以根据需要扩展换成其他能力模块Editor 组件使用
在页面中嵌入 Editor 组件即可开始使用插件化富文本编辑器了：
-- -------------------- ---- -------
------ ------ - --------- ----------- - ---- --------
------ - ------ - ---- ---------------------------
------ ------- -------- ----- -
----- ------------- --------------- - ----------- -- -------------------------------------- -------- -----------
----- -------- - ------------------------- -- -
-- -- ---------
----------------------------
-- ------------------
------ -
---- ----------------
-------
-------------------------
-------------------
----------------- --------- --------
--
------
--
-扩展插件
在使用 plugined-draft-js-editor 能力的同时，也可以自己编写插件来扩展更多的功能。编写插件需要使用 Draft.js 中提供的一些 API 来操作编辑器的 Selection、ContentState、数据结构等。如果您想了解更多关于 Draft.js 的 API 等，可以到 Draft.js 的官网学习详细文档。
以编写一个 addEmojis 的插件为例：
-- -------------------- ---- -------
----- --------------- - -
------------- --- -- -
-- ---------- --- --- -
------ ------------
-
------ -----
--
----------------- --------- ------------ - -------------- -- -- -
------ --------- -
---- ------------
----- ------------ - --------------------------------
----- --------- - ---------------------------
----- ----- - -----
----- --------------- - --------------------
-------------
----------
------
--
----- -------------- - -----------------
------------
----------------
--------------------
--
-------------------------------
------ ----------
--------
------ --------------
-
--
--在 Editor 组件中应用该插件：
-- -------------------- ---- -------
------ ------ - --------- ----------- - ---- --------
------ - ------ - ---- ---------------------------
------ - ------------ --------- - ---- -----------
----- --------------- - - -- --- -- --
------ ------- -------- ----- -
----- ------------- --------------- - ----------- -- -------------------------------------- -------- -----------
----- -------- - ----------------------- -- -
----------------------------
-- ----
----- ---------------- - --------------------- ------------ -- -
----- -------- - --------------------------------------- ---------
-- ---------- -
-------------------
------ ----------
-
------ --------------
-- ------------
----- ------- - ------------------
------ -
---- ----------------
-------
-------------------------
-------------------
-----------------------------------
-----------------
----------------- --------- --------
--
------
--
-示例代码
-- -------------------- ---- -------
------ ------ - --------- ----------- - ---- --------
------ - ------ - ---- ---------------------------
------ - ------------ ---------- -------- - ---- -----------
----- --------------- - -
------------- --- -- -
-- ---------- --- --- -
------ ------------
-
------ -----
--
----------------- --------- ------------ - -------------- -- -- -
------ --------- -
---- ------------
----- ------------ - --------------------------------
----- --------- - ---------------------------
----- ----- - -----
----- --------------- - --------------------
-------------
----------
------
--
----- -------------- - -----------------
------------
----------------
--------------------
--
-------------------------------
------ ----------
--------
------ --------------
-
--
--
------ ------- -------- ----- -
----- ------------- --------------- - ----------- -- -------------------------------------- -------- -----------
----- -------- - ----------------------- -- -
----------------------------
-- ----
----- ---------------- - --------------------- ------------ -- -
----- -------- - --------------------------------------- ---------
-- ---------- -
-------------------
------ ----------
-
------ --------------
-- ------------
----- ------- - ------------------
------ -
---- ----------------
-------
-------------------------
-------------------
-----------------------------------
-----------------
----------------- --------- --------
--
------
--
-总结
plugined-draft-js-editor 是一款强大的、组件化、插件化的富文本编辑器开发库。使用 plugined-draft-js-editor，开发者可以快速地构建出自己所需的富文本输入框，并能够使用现有的插件或同时编写自己的插件扩展更多的功能。
学习和熟练掌握如何使用 plugined-draft-js-editor 对于一个前端工程师来说是必须的。在构建企业级项目中，富文本编辑器是日常需求，通过插件化富文本编辑器框架可以大大提高项目开发效率，降低项目维护成本，对于提高个人开发水平和对项目的贡献是非常有指导意义的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730781e8991b448e932e