引言
随着前端技术的不断发展,富文本编辑器已成为 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。
安装包
在终端中使用以下命令进行安装:
--- ------- ------ --------------------------------------
配置编辑器
首先需要创建一个 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