CKEditor5系列二：创建简单插件

最新推荐文章于 2024-06-17 15:30:06 发布

老酒馆的猫

最新推荐文章于 2024-06-17 15:30:06 发布

阅读量2.2k

点赞数 4

分类专栏： CKEditor5 文章标签： ckeditor

本文链接：https://blog.csdn.net/oldpubcat/article/details/105519057

版权

本文档介绍了如何在CKEditor5中创建和使用自定义插件。首先讲解了如何加载和注册原生插件，然后详细阐述了创建插件的过程，包括插件的基础结构、文件组织和命令注册。此外，还提供了在外部调用插件命令的方法。

摘要由CSDN通过智能技术生成

如果还不会安装的话可以看第一篇：https://blog.csdn.net/oldpubcat/article/details/105518980

写一个完善插件看这：https://blog.csdn.net/oldpubcat/article/details/105519096

1、使用原生插件

首先我们先来说一下怎么用原生插件，CKEditor把原生的各种插件也都抽离出来了，减少了包的体积但是当代码用的多的时候可能要加载特别多的包，这个可以去使用他在线打包的那个工具，前面一篇文章也有说，其次就自定义安装加载了，需要什么加载什么的，我这边用NPM安装其他插件。

这里使用horizontal-line插件示例，这里假定你已经安装并成功运行了一个最简单的CKEditor项目。

首先安装它npm install --save @ckeditor/ckeditor5-horizontal-lin

然后在app.js里加载import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';

加载完之后注册到plugins里面

ClassicEditor
  .create(document.querySelector('#editor'), {
   
    // .... 其他配置
    plugins: [HorizontalLine],
    toolbar: ['HorizontalLine']
  })
  // 创建成功的回调
  .then(editor => {
   
    // to do sth..
  })
  .catch(error => {
   
    console.error(error.stack);
  });

2、创建插件

创建一个很简单的插件作为实例，官网也有对应的实例：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html

我这里就不用这个了。

插件基本上就是生成下面的结构

<div class="testEdit">
  <span class="edit">编辑</span><span class="delete">删除</span>
</div>

2.1 创建插件的基础

CKEditor创建插件要求尽量低耦合，然后文件管理可以一个文件也可以多个模块组合成一个插件，我这里就用多个模块来处理了。

具体代码的意义我会在注释里加上

在根目录创建一个block文件夹，一般来说需要4个模块，第一个是入口文件。

// block/block.js
import blockedit from './blockedit'
import blockui from './blockui'
// 插件类，创建插件必须基于这个类扩展
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
// 实例化一个类，然后导出
export default class Block extends Plugin{
   
  static get requires() {
   
    return [blocked, blockui];
  }
}

第二个是用来定义架构的文件，CKEditor创建元素需要先在代码里注册好架构模型，然后调用命令去生成元素，而不是直接插入一段HTML。

// block/blockedit.js
// 插件类，需要基于这个扩展
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
// 在这个文件里面创建命令
import command from './blockcommad.js';

export default class Blockedit