ckeditor批量上传图片（上）

来源：互联网发布：js添加事件编辑：程序博客网时间：2024/09/21 09:25

什么都不说，先上图···
这里写图片描述

这里写图片描述

好了！现在该说说了···
ckeditor本身已经不提供批量传图功能了，想要传图，要么点一张传一张，要么就是想尽一切办法自己添加这个功能插件！网上不乏ckeditor+SWFUpload或是ckeditor+ckfinder的例子，然而，本文讲的是ckeditor+JqueryFileUpload~

第一步：准备需求资源

jquery：比如jquery-2.1.1.min.js
ckeditor：直接去官网下啦

第二步：增加多图上传插件：multiimg

首先，建立所需的文件目录：在ckeditor根目录下找到plugins文件夹，该文件夹下存放的是ckeditor的所有插件，我们的插件也将放在这里！在该目录下建立文件夹multiimg，然后在multiimg下建立相关的文件和文件夹，建完之后应该是这样子的：
【multiimg目录下的视图】

【dialogs目录下的视图】

说明：为避免干扰，先将无关文件马赛克了
编写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 + "upload.png" //the icon in toolbar            });              CKEDITOR.dialog.add("multiimg", this.path + "dialogs/multiimg.js")          }      })  })();

这个文件代码不难理解，直接复用即可！

编写multiimg.js文件

(function() {      CKEDITOR.dialog.add("multiimg",          function(a) {             var ROOT_PATH = "/study/"; // your root path            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="'+ROOT_PATH+'js/ckeditor/plugins/multiimg/dialogs/image.html?v=' +new Date().getSeconds() + '" frameborder="0"></iframe>'                      }]                  }],                  // when the dialog ended width ensure,"onOK" will be executed.                onOk: function() {                    var ins = a;                      var num = window.imgs.length;                    var imgHtml = "";                    for(var i=0;i<num;i++){                          imgHtml += "<p><img src=\"../" + window.imgs[i] + "\" /></p>";                       }                    ins.insertHtml(imgHtml);                   },                  onShow: function () {                      document.getElementById("uploadFrame").setAttribute("src",ROOT_PATH+"js/ckeditor/plugins/multiimg/dialogs/image.html?v=' +new Date().getSeconds() + '");                  }              }          })  })();

说明：这个文件就是在你点击toolbar上的批量传图图标之后要执行的文件，它的效果就是返回一个dialog对话框。这里的做法是：在dialog里面通过iframe去加载image.html文件，而这个文件的作用就是完成图片上传！其次，文件中涉及的路径不必纠结，只要你能访问到文件即可。

准确来说，图片的上传主要是靠image.html和image_upload.php文件，至于这两个文件的内容，会在下篇阐述，现在先完成这个插件的添加！

改写配置文件config.js
在ckeditor根目录下找到congfig.js文件，然后在config.plugins项添加你的插件名称，如下图：

说明：可能你的config.js文件里面没有这一项，但也没有关系，插件还是可以添加的，不过就是有点不正常：这种情况下你只能添加一个插件，如果你添加了两个插件，那么后面那一个会替换掉前面那一个。（这种说法不知是否准确，但至少博主是遇到过这种情况的！）
接下来做的就是调整你添加的插件的显示位置，我的位置是添加到那里去的（见开篇图，对！就是那个亮瞎眼的图标~）：在config.toolbarGroups项移动 { name: ‘others’ } 的位置，你的图标位置也会相应改变。

这里写图片描述

至此，插件就成功添加了！

第三步：验证插件
首先，引入ckeditor.js文件：

<script src="../js/ckeditor/ckeditor.js"></script>

其次，在body上增加textarea标签：

<textarea class="ckeditor" name="editor" id="" cols="30" rows="10"></textarea>

这样就够了！注意，代码 class="ckeditor" 不可缺！

最后，美美地在浏览器里面欣赏吧~

稍后会将下篇补上~

0 0