引言
随着前端技术的不断发展，富文本编辑器已成为 Web 开发中不可缺少的一部分。而 CKEditor 是前端常用的富文本编辑器之一。在 CKEditor 5 中，官方提供了一个 @ckeditor/ckeditor5-build-classic 子包，它包含了 CKEditor 5 标准版构建所需的所有插件和依赖项。但是官方的构建并未包含表格插件，在需要使用表格插件的场景下，开发者需要自行安装和配置相应插件。而 @immugio/ckeditor5-build-classic-table 就是一个专门针对 CKEditor 5 经典版增加表格插件的 npm 包。
本文将详细介绍如何安装、配置以及使用 @immugio/ckeditor5-build-classic-table 这个 npm 包。
准备工作
确认已经安装好 Node.js 和 npm。
安装包
在终端中使用以下命令进行安装：
npm install --save @immugio/ckeditor5-build-classic-table
配置编辑器
首先需要创建一个 CKEditor 实例，然后才能将表格插件添加到编辑器中。使用以下代码初始化经典版 CKEditor：
-- -------------------- ---- -------
---- -------------------------------------- -
------ ------------- ---- -----------------------------------------
----- -------- --
-------------
-------- ----------------------- --------- - -
------ ------ -- -
------------ ------ --
--
------- ----- -- -
-------------- ----- --
- --其中，’#editor’ 表示 CKEditor 编辑器要绑定在哪一个 DOM 元素上。
应用插件
在 CKEditor 5 中，添加插件有两种方式：
使用工厂创建插件
首先创建一个 Inject 行为来引入 CKEditor 插件，然后将行为应用到编辑器实例，类似于以下代码：
-- -------------------- ---- -------
------ ------------- ---- -----------------------------------------
------ ----- ---- --------------------------------------
------ ------------ ---- ---------------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - ------ ------------ --
-------- - ---------- ---- ------- --------- ------- ---- ------- ------- ---- -------------- ----------------- -
- -
------ ------ -- -
------------ ------ --
- -
------- ----- -- -
-------------- ----- --
- --注意，Table 和 TableToolbar 两个插件需要分别引入。除此之外，还需要在 toolbar 中加入 insertTable 和 mergeTableCells 其他按钮，才能在编辑器的工具栏中正常显示表格功能。
使用 install 插件
在编辑器添加完整的插件列表后，可以通过以下方式来使用 CKEditor 5 自带的 install 插件将每个插件添加到编辑器中：
-- -------------------- ---- -------
------ ------------- ---- -----------------------------------------
------ ----- ---- --------------------------------------
------ ------------ ---- ---------------------------------------------
-------------
-------- ----------------------- --------- -- -
------------- - ------ ------------ --
- -
------ --- -
------- --- --示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ ------------- ---- -----------------------------------------
------ ----- ---- --------------------------------------
------ ------------ ---- ---------------------------------------------
-------------
-------- ----------------------- --------- -- -
------------- - ------ ------------ --
-------- - ---------- ---- ------- --------- ------- ---- ------- ------- ---- -------------- ----------------- -
- -
------ ------ -- -
------------ ------ --
- -
------- ----- -- -
-------------- ----- --
- --总结
通过简单的安装和配置，我们可以在经典版 CKEditor 中加入表格插件 @immugio/ckeditor5-build-classic-table，让富文本编辑器更加实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f86238a385564ab6cd8