在前端开发中，有许多对富文本编辑器处理的需求。而在使用 CKEditor5 的时候，我们可能会遇到一个需要快速全选所编辑内容的需求。那么，@ckeditor/ckeditor5-select-all 就是一个很不错的 npm 包，它提供了一个解决这种需求的功能。
安装
在开始使用该 npm 包之前，需要先将其安装。可以使用 npm 或 yarn 安装它。具体命令如下：
# 使用 npm npm install --save @ckeditor/ckeditor5-select-all # 使用 yarn yarn add @ckeditor/ckeditor5-select-all
使用
在 main.js 中导入
-- -------------------- ---- -------
------ ------------- ---- ------------------------------------
------ --------- ---- -----------------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - --------- -
- -
------ --- -
------- --- --其中 ClassicEditor 是在 @ckeditor/ckeditor5-build-classic 包中所提供的编辑器构建器。而 document.querySelector( '#editor' ) 则是在 HTML 中所定义的一个 DOM 元素，它将成为文本编辑器的容器。plugins 字段则是传入的插件数组，其中包含了 SelectAll 插件。
在 HTML 中使用
<div id="editor">Hello, <strong>World</strong>!</div>
以上 HTML 代码定义了一个 div 元素，并设置了 ID 为 editor。该 div 元素中还包含了一些文本和一个加粗的文本“World”。
在页面中引入所需资源
在使用 CKEditor5 的时候，需要在页面中引入所需的 CSS 和 JavaScript 资源。以下是引入资源的示例代码，具体引入方式和路径需要根据项目的配置来调整。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------ -----------
------- ---------------------------------------------
----- ---------------- ---------------------------------------------
-------
------
---- ------------------ -----------------------------
--------
-- ----------
---------
-------
-------示例代码
最后，以下代码是一个简单的示例，它演示了如何使用 @ckeditor/ckeditor5-select-all 包来实现全选功能。请注意，以下代码需要结合上面的使用方式和引入资源的代码才能正常工作。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------ -----------
------- ---------------------------------------------
----- ---------------- ---------------------------------------------
-------
------
---- ------------------ -----------------------------
------- ----------------------------- ------------
--------
------ ------------- ---- ------------------------------------
------ --------- ---- -----------------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - --------- -
- -
------ ------ -- -
----- --------------- - ----------------------- -------------------- --
--------------------------------- -------- -- -- -
--------------- ----------- --
- --
- -
------- --- -- -
-------------- --------- --
- --
---------
-------
-------在以上代码中，我们定义了一个包含编辑器和一个“全选”按钮的 HTML 页面，以及引入了所需的资源。编辑器和插件的初始化与之前所述的使用方式是相同的。关键的区别在于在 JavaScript 代码中监听了“全选”按钮的点击事件，当按钮被点击时，为编辑器实例执行 selectAll 命令即可实现全选功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3209b43b0ab45f74a8bd4c