介绍
@ckeditor/ckeditor5-restricted-editing 是ckeditor5的一个npm包，它提供了一些限制编辑的功能，例如禁止修改样式、表格，或只允许插入指定的元素等。该npm包可以帮助前端开发人员更加灵活地实现对于富文本编辑器的使用限制，以满足不同场景下对于使用富文本编辑器的要求。
安装
使用npm进行安装：
npm install --save @ckeditor/ckeditor5-restricted-editing
引入
import RestrictedEditing from '@ckeditor/ckeditor5-restricted-editing/src/restrictedediting';
配置
-- -------------------- ---- -------
-------------
------------------------------------------ -
-------- - ----------------- --
------------------ -
------------------ -------- ----------
-------------------- - ----- ---- --------- ---- -
-
--
------------ -- -
---------------------
---配置项
- allowedAttributes： 允许的属性列表。
- allowedElementNames：允许的元素名称列表。
- allowedKeystrokes：允许使用的按键列表。
以上三个配置项都是可选的，你可以根据自己的需求组合使用。
示例代码
以下示例代码实现了只允许编辑器中包含h1、p、strong、em四个标签，并且只允许这四个标签中使用bold（粗体）和italic（斜体）两个属性。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------------------------------------
------- -----------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
-------
------
--------- ------------- ------------
-------- -- - ------------
------- -- - --------------
--------------- -- - ---- ------------------
----------- -- -- ------ --------------
-----------
--------
-------------
------------------------------------------ -
-------- - ----------------- --
------------------ -
------------------ -------- ----------
-------------------- - ----- ---- --------- ---- -
-
--
------------ -- -
---------------------
---
---------
-------
-------总结
通过本文，我们学习了npm包 @ckeditor/ckeditor5-restricted-editing 的使用方法，知道了如何在富文本编辑器上进行灵活的使用限制。希望这篇文章可以帮助你更好地应对富文本编辑的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3209b43b0ab45f74a8bd4b