前言
在前端开发中，富文本编辑器是一个非常常见的需求，在这些富文本编辑器中，draft-js 可以说是使用最广泛的一个开源编辑器之一。而且通过使用 draft-js 的 plugin 机制，我们可以非常方便的扩展和定制编辑器的功能，今天我们要介绍的是一个可以帮助我们解决一些烦人问题的扩展插件: draft-js-focus-plugin-canopy。
什么是 draft-js-focus-plugin-canopy？
当我们在 draft-js 中编辑一个长篇文章的时候，有时候我们需要快速定位到某个内容，并且只想先看到这个内容，而其他部分可以先不看，这个时候 draft-js-focus-plugin-canopy 就能够非常好的解决这个问题。它可以让我们在编辑器中选择一段文字、或者一个 entity，然后只显示与这段文字或者 entity 相关的内容，其它的全部被遮盖住了，这样我们可以非常方便的专注于某一部分内容的编辑或者阅读。
如何安装？
draft-js-focus-plugin-canopy 是一款通过私有 npm 仓库安装并使用的插件。我们在安装插件前，需要先将私有仓库添加到我们的 npm 源中，可以使用如下命令：
npm config set registry https://registry.npmjs.org/ npm login npm config set registry https://npm.xxx.com/
npm.xxx.com 是我们的私有 npm 仓库地址。
然后我们可以在项目中通过如下命令来安装 plugin：
npm install draft-js-focus-plugin-canopy
安装完成后，我们可以在项目中使用这个库。
如何使用？
我们可以在创建 draft-js editor 的时候，将 draft-js-focus-plugin-canopy 插件注册到我们的 editor 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------------------------- ---- -----------
------ ------------------ ---- -------------------------------
----- ------------ - ---------------------
----- ------- - ---------------
----- ------- - -------------------------------------------------------- ----------------------------------------------------------------------------------------------
----- ----------- - ------------------------------------------------------------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - --------------------------
------------- - ------------- -- -----------------------------
-
------------------- -
----- -------- - ----------
---------------
-
-------- -
------ -
---- --------------- ---- ----- -------------- -----
-------
------------
------------------------------------
------------------------
-----------------
--
-------------------------- --
------
--
-
-这里我们通过 createCanopyPlugin 函数来创建出我们的插件实例，然后将其注册进我们的配置项中，之后就可以像使用其他 plugin 一样使用这个插件了。
如何使用插件？
插件的默认行为是禁用的，我们可以通过选中一个 entity 来启用插件。当插件被启用时，会出现两个按钮，分别用来进入/离开遮罩层，如图所示：
我们可以点击这两个按钮来进入或者离开遮罩层。
如何设置默认选中的 entity？
我们可以通过调用 canopyPlugin.setEntity() 方法，将我们需要默认选中的 entity 传递给插件：
const entity = {
type: 'FOCUS',
data: {
text: 'entity',
},
};
canopyPlugin.setEntity(entity);这样在 editor 初始化的时候，插件就会默认选中这个 entity。
如何自定义样式？
插件为我们提供了两个遮罩层的 className，分别是 .Canopy 和 .Canopy-overlay，这样我们可以通过自定义样式表来自定义遮罩层的样式。
-- -------------------- ---- ------- ------- - ----------------- ------- -- -- ----- ------ ------ -------- ----- - --------------- - ----------------- ------- -- -- ----- -
总结
通过使用 draft-js-focus-plugin-canopy，我们可以非常方便的处理一些长篇文章的编辑和阅读中的问题，让我们可以非常快捷的专注于某个内容的编辑或者阅读，它是一款非常实用的 draft-js 插件，希望它能为你的项目带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005515a81e8991b448ce76a