前言
随着前端技术的不断发展，越来越多的富文本编辑器被应用于各种业务场景。然而，由于富文本编辑器的处理机制、样式等各异，常常会带来难以预料的问题，比如粘贴过来的文本会带有各种奇怪的样式，或者用户使用了不符合业务规范的字体大小、颜色等。这时候，我们通常需要一个去格式化工具来过滤这些奇怪的样式，保证用户输入的内容的一致性和规范性。在这篇文章中，我将介绍一个非常实用的 npm 包：@ckeditor/ckeditor5-remove-format，它能够自动过滤 HTML 文本中的样式，非常适合在前端项目中使用。
@ckeditor/ckeditor5-remove-format 简介
@ckeditor/ckeditor5-remove-format 是 CKEditor 5 的一个插件，它提供了简单易用的 API，能够方便地过滤输入或者输出的文本，去除其中的所有样式。它支持的文本格式有 HTML、富文本编辑器的数据格式等，常常被应用于富文本编辑器、文本处理和数据格式化等方面。
@ckeditor/ckeditor5-remove-format 的主要功能如下：
- 去除所有 HTML 标签和属性：将富文本编辑器所产生的 HTML 文本，自动去除所有标签和属性，只保留纯文本。例如，将
<p><strong><em>这是一段带样式的文本</em></strong></p>转化为这是一段带样式的文本。 - 去除所有样式类和样式属性：在 HTML 标签中，有时候会有样式类或者样式属性的设置，这会影响到我们输入文本的样式，比如字体、颜色等。@ckeditor/ckeditor5-remove-format 可以过滤这些干扰项，对于输入的文本只保留原本的样式。例如，
<p class="alert"><strong style="color: red;">这是一段带样式的文本</strong></p>会被过滤成这是一段带样式的文本。
@ckeditor/ckeditor5-remove-format 还支持配置项，比如可以自定义需要保留的标签和属性等。
安装和使用
@ckeditor/ckeditor5-remove-format 可以通过 npm 安装，使用前需要先安装 CKEditor 5。下面是具体的安装和使用步骤：
1. 安装 CKEditor 5
使用 npm 安装 CKEditor 5：
npm install @ckeditor/ckeditor5-build-classic
2. 安装 @ckeditor/ckeditor5-remove-format
使用 npm 安装 @ckeditor/ckeditor5-remove-format：
npm install @ckeditor/ckeditor5-remove-format
3. 编写代码
下面是一个基础的使用示例：
-- -------------------- ---- -------
------ ------------- ---- ------------------------------------
------ ------------ ---- ------------------------------------
--------------------- ----------------------- --------- -- -
-------- - ------------ --
-------- - -------------- -
- -
------ ------ -- -
------------ ------- --- ------------- ------ --
- -
------- ----- -- -
-------------- ----------- --
- --这段代码会创建一个 CKEditor 5 编辑器，并加载 RemoveFormat 插件。在 toolbar 中添加了移除格式的按钮。
API
@ckeditor/ckeditor5-remove-format 的 API 能够进一步地控制移除格式的细节。例如，可以设置允许保留的标签和属性等。下面是主要的 API：
RemoveFormatEditing
RemoveFormatEditing 类提供了编辑器的基础功能，可以用于处理编辑器中的文本。它有以下的属性和方法：
RemovalConfig
构造函数参数，一个对象，用于指定去除格式的选项。可选的属性有：
allowedTags: string[]，用于指定需要保留的标签，默认为null。allowedAttributes: Record<string, string[] | boolean>，用于指定需要保留的属性和值，默认为null，表示不过滤属性和值。
例如：
import { RemovalConfig } from '@ckeditor/ckeditor5-remove-format/src/removeformatediting';
const removalConfig = new RemovalConfig( { allowedTags: [ 'p', 'ol', 'ul', 'li' ] } );removeFormat
方法，用于移除指定范围内的格式。它有以下的参数：
start: Position，开始位置。end: Position，结束位置。config?: RemovalConfig，去除格式的选项配置。
例如：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------------------------------------------------ ----- ------ - -- ----- ----- ------------- - -- --------- ----- ----- - ------------- ----- ----- - -------------------------------------------- ----- --- - ------------------------------------------- ------------- ------ ---- ------------- --
RemoveFormat
RemoveFormat 类是编辑器插件的主要类，它继承自 Plugin 基类。它的实例会被添加到编辑器的插件中，用于响应用户的手动操作。
RemoveFormat 类提供了以下的选项和方法：
config
静态属性，用于指定插件的一些默认选项，如：
-- -------------------- ---- -------
------ ------------ ---- ------------------------------------
------------------- - -
------------ - ---- ----- ----- ---- --
------------------ -
---- - -------- ------- -
-
--init
方法，用于初始化插件。
例如：
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------
------ ------------------- ---- ------------------------------------------------------------
------ ------- ----- ------------ ------- ------ -
------ --- ---------- -
------ - ------------------- --
-
------ -
------------ ------------- --- ------------ --
-
-总结
总之，@ckeditor/ckeditor5-remove-format 是一个非常实用的 npm 包，特别适合在前端项目中使用。它能够自动去除 HTML 文本中的样式和干扰项，保证输入和输出的文本的一致性和规范性。它还有丰富的 API 和配置，便于开发者进行定制和使用。这篇文章中，我们介绍了它的使用方法和 API，相信读者在日常开发中一定会有所收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3209b43b0ab45f74a8bd4a