CKEditor是目前不错的一个在线Html可视化编辑工具，但是他的图片上传功能有点弱了，只能单张单张的上传，很麻烦。
偶尔一次发现UEditor（），这个百度开源出来的工具，非常不错，微信公众平台也在用他，尤其是多图片上传的功能，非常不错，那么如果将UEditor中的多图片功能嫁接到CKEditor，是不是就完美了，，那就行动吧。
首先，我们得了解CKEditor插件的开发流程。
插件的实现需要放到CKEditor/plugins目录下，建一个我们插件的目录，如multiimg，目录结构看下图：
其中plugin.js是关键的插件描述文件，内容如下：
(function() {CKEDITOR.plugins.add("multiimg", {requires: ["dialog"],init: function(a) {a.addCommand("multiimg", new CKEDITOR.dialogCommand("multiimg"));a.ui.addButton("multiimg", {label: "批量上传图片",//调用dialog时显示的名称command: "multiimg",icon: this.path + "g.ico"//在toolbar中的图标});CKEDITOR.dialog.add("multiimg", this.path + "dialogs/multiimg.js")}})})();如上所述，plugin.js文件定义了插件的基本信息，这里，我们的插件在CKEditor上添加了一个多图片上传的按钮，点击按钮后，他会打开一个对话框，对话框加载dialogs下的multiimg.js，我们来看一下这个js的内容：
(function() {CKEDITOR.dialog.add("multiimg",function(a) {return {title: "批量上传图片",minWidth: "660px",minHeight:"400px",contents: [{id: "tab1",label: "",title: "",expand: true,width: "420px",height: "300px",padding: 0,elements: [{type: "html",style: "width:660px;height:400px",html: ‘<iframe id="uploadFrame" src="/image/image.html?v=’ +new Date().getSeconds() + ‘" frameborder="0"></iframe>’}]}],onOk: function() {var ins = a;var num = window.imgs.length;if(window.duiqi == undefined || window.duiqi == null){window.duiqi = "none";}for(var i=0;i<num;i++){var imgHtml = "<p";if("center" == window.duiqi){imgHtml += " style=\&;text-align:center\&;>";}else{imgHtml += ">";}imgHtml += "<img src=\&;" + window.imgs[i].url + "\&; ";if("none" != window.duiqi && "center" != window.duiqi){imgHtml += "style=\&;float: " + window.duiqi + ";\&;/>";}else{imgHtml += "/>";}imgHtml += "</p>";ins.insertHtml(imgHtml);}window.imgs = new Array();//点击确定按钮后的操作//a.insertHtml("编辑器追加内容");},onShow: function () {document.getElementById("uploadFrame").setAttribute("src","/image/image.html?v=’ +new Date().getSeconds() + ‘");}}})})();我们的实现也比较简单，对话框加载了一个iframe，iframe就默认打开UEditor的图片上传控件。
酒般的思念，一饮就醉，醉时就用全部的热情读这忧伤的月色，
