npm 包 @immugio/ckeditor5-build-classic-table 使用教程

引言

随着前端技术的不断发展,富文本编辑器已成为 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


猜你喜欢

  • npm 包 ndcopy-ndpaste 使用教程

    什么是 ndcopy-ndpaste? ndcopy-ndpaste 是一个在前端开发中常用的 npm 包。它可以让我们在开发过程中快速复制和粘贴代码,减少手动敲入代码的时间,提高开发效率。

    3 年前
  • npm 包 js-adt 使用教程

    简介 js-adt 是一个 JavaScript Abstract Data Type (抽象数据类型) 库,它提供了一些常用的数据结构,如栈、队列、字典、集合等等。

    3 年前
  • npm 包 vuepress-vuebook 的使用教程

    简介 vuepress-vuebook 是一个基于 VuePress 的扩展,专门用于快速构建和发布 Vue 书籍开发文档。它提供了良好的用户界面和功能,支持强大的 Markdown 编写和代码高亮、...

    3 年前
  • npm 包 polymer-ui-router 使用教程

    npm 包 polymer-ui-router 使用教程 随着前端技术的不断发展和壮大,越来越多的开发者开始关注到前端路由的重要性。而在前端路由中,UI 路由则是一项非常重要而实用的技术。

    3 年前
  • npm 包 @j154004/react-image-upload-dialog 使用教程

    在前端开发中,上传图片是一个非常常见的需求。然而,实现一个易用、灵活、功能齐全的图片上传组件并不是一件容易的事情。好在有很多第三方库可以帮助我们快速地实现图片上传功能。

    3 年前
  • npm 包 pl-styled-bootstrap-grid 使用教程

    在前端开发中,响应式设计和栅格布局已经成为必要技能,但实现起来也比较琐碎。于是,一些优秀的栅格库应运而生。pl-styled-bootstrap-grid 就是其中之一,它基于 Bootstrap,并...

    3 年前
  • npm 包 angular2-bulma 使用教程

    简介 angular2-bulma 是一个基于 Bulma 样式库的 Angular2 UI 组件库。Bulma 是一个现代化、响应式的 CSS 框架,提供了许多常用的样式和组件,非常适合用于快速开发...

    3 年前
  • npm 包 cemu-no-gyro 使用教程

    简介 cemu-no-gyro 是一款 NPM 包,其可以使得 Cemu 模拟器的手柄在电脑上使用,无需使用陀螺仪功能。该包的灵感来自于因为模拟陀螺仪而被禁止使用模拟器的玩家们。

    3 年前
  • npm 包 floodgates 使用教程

    一、什么是 floodgates floodgates 是一个基于 React 的前端组件库,提供了多种常用组件,包括按钮、输入框、下拉框等,旨在帮助开发者快速构建用户界面。

    3 年前
  • npm包opery使用教程

    简介 opery 是一个轻量级的操作数组的 JavaScript 库,提供了方便的操作,例如过滤,排序和筛选等。它是一个高效的npm包,可以轻松地在你的项目中引入并使用。

    3 年前
  • npm 包 zigit-reactjs-components 使用教程

    在现代的 Web 开发中,React 是非常受欢迎的前端开发框架之一。而 npm 是一个包管理工具,可以方便地下载、安装和管理各种包和库。本文将介绍如何使用 zigit-reactjs-compone...

    3 年前
  • npm 包 ctc-overlay-jquery 使用教程

    前言 在前端开发中,经常需要对页面上某个元素进行遮罩处理,这时候用到的就是遮罩层(overlay)。遮罩层是一种常用的 UI 组件,可以提升用户交互体验,用于实现确认框、提示框、滑动菜单等效果。

    3 年前
  • npm 包 fe-type 使用教程

    前言 在开发前端应用程序时,类型检查可能是一个重要的环节。而 fe-type 这个 npm 包可以为我们提供类型检查的支持。在这篇文章中,我们将详细介绍如何安装和使用 fe-type。

    3 年前
  • npm 包 ghostout-ui-kit 使用教程

    在前端开发过程中,UI 组件是不可或缺的。为了提高工作效率和代码质量,我们经常会使用已经封装好的 UI 组件库。在这篇文章中,我们将介绍一款 npm 包 ghostout-ui-kit,它是一个优秀的...

    3 年前
  • npm 包 heropatterns-react 使用教程

    在前端开发过程中,有时候需要使用不同的图案来装饰网站的设计,而使用纯 CSS 来创建图案会有一定的技术难度。在这种情况下,我们可以使用 npm 包 heropatterns-react,它可以帮助我们...

    3 年前
  • npm 包 rollup-plugin-hypothetical-alt 使用教程

    在前端开发中,经常需要使用打包工具来对代码进行压缩和处理。而 Rollup 是一种经常被应用于打包 JavaScript 应用程序的可扩展模块化工具。它提供了一种高效的打包方式,可以将多个模块合并为一...

    3 年前
  • npm 包 lerna-jsconfig 使用教程

    前言 如果你是一名前端开发人员,你可能知道 npm 是一个常用的包管理工具。你可能也用过 lerna,它是一个 npm 库,用于管理多包仓库的工具。 当我们需要为一个项目设计多个包时,使用 lerna...

    3 年前
  • npm 包 @programming-languages-logos/css 使用教程

    在前端开发中,我们经常需要使用各种图标或者编程语言的 logo 来美化页面或展示技能。而 @programming-languages-logos/css 正是一个可以使用的 npm 包,它提供了很多...

    3 年前
  • npm 包 @programming-languages-logos/html 使用教程

    在前端开发中,经常需要引用不同语言的 logo。而 @programming-languages-logos/html 这个 npm 包就提供了 HTML 语言的 logo,方便我们在网页中展示。

    3 年前
  • npm 包 @zhangliu/babel-plugin-react-render-error

    在前端开发中,React 组件库是不可替代的一部分。但是开发中难免会出现一些不易发现的渲染错误,这些错误往往需要花费很多时间来调试。这时候,@zhangliu/babel-plugin-react-r...

    3 年前

相关推荐

    暂无文章