CKEditor 简单图片上传插件开发和详细步骤

最新推荐文章于 2025-09-05 15:20:23 发布

原创

最新推荐文章于 2025-09-05 15:20:23 发布 · 置顶 · 5.8k 阅读

本文介绍了如何开发一个CKEditor的简单图片上传插件，包括插件目录结构、主要涉及的方法如CKEDITOR.plugins.add、editor.ui.addButton、editor.addCommand等，并提供了具体的plugin.js代码示例以及配置集成到toolbar的步骤。

CKEditor插件使用方法就不在这里赘述了，这里只讲CKEditor的插件开发，下面是官方开发的指南的地址

官方插件开发指南

CKEditor插件目录

 - ckeditor 根目录/
     - plugins/
         - pluginName 与插件名对应的文件夹/
             - icons 插件图标文件夹/
                 - pluginIcon.png
             - dialog 如果插件有弹出框则需要/
             - plugin.js 插件脚本/

本次开发的插件没有弹出框（dialog），所以没有dialog文件夹。
目录结构如下:
开发插件目录结构

第一步(开发插件目录下的plugin.js)

需要用到的几个方法和类

1.CKEDITOR.plugins.add()
方法定义如下，需要两个参数

第一个参数是字符串，插件名字
第二个参数需要定义一个 CKEDITOR.pluginDefinition 函数对象

这里写图片描述

2.CKEDITOR.pluginDefinition对象
该对象下有四个方法分别是：

afterInit(editor) 初始化页面之后调用
beforeInit(editor) 初始化页面之前调用
init(editor) 初始化页面调用
onLoad(editor) 页面载入完成时调用
官方描述如下:

3.editor.ui.addButton()
方法描述：添加新的按钮到按钮列表
该方法接收两个参数：

按钮名字，接收字符串
按钮属性定义对象，常用的有
- label 按钮提示和按钮显示的文字（如果可见的话）
- command 当按钮被点击的时候执行的命令名字，类似onClick()方法中的执行函数名。
- icon 按钮图标图片路径

官方描述如下:
这里写图片描述
4.editor.addCommand()
方法描述：添加一个命令到editor实例，该命令添加之后可以使用execCommand()执行。

该方法接收两个参数：

命令名，接收字符串，上面addButton中的命令名于此处对应
命令定义对象 (commandDefinition) ，详细如下 5
官方描述如下：

这里写图片描述

5.CKEDITOR.commandDefinition
该对象包含两个方法：

exec 命令被调用时执行此函数
refresh 通过命令定义定义的函数来确定的命令状态，当编辑器有它改变了状态或选择它会被调用。

官方描述如下：
这里写图片描述

上面讲解了需要用到的方法和对象
下面直接上代码

plugin.js代码

/**
 * 添加自定义图片上传组件
 */
CKEDITOR.plugins.add('MultipleImageUpload',{
  
  //调用add方法添加插件
    init : function (editor) {
   
    //初始化页面时调用方法，接收一个富文本对象实例
        var pluginName = 'MultipleImageUpload'; //插件名
        var _file = document.getElementById('editFileInput'); //获取页面中的file文件选择器对象
        /**
         * 添加执行命令
         */
        editor.addCommand('openFileComm', {
  
  //添加命