logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

CKEditor 多图片上传插件（一） （二）

 看见就非常 2014-05-12

2014-04-10 18:47 77人阅读 评论(0) 收藏 举报
插件ckeditorhtml可视化编辑器

CKEditor是目前不错的一个在线Html可视化编辑工具，但是他的图片上传功能有点弱了，只能单张单张的上传，很麻烦。

偶尔一次发现UEditor（http://ueditor.baidu.com/website/），这个百度开源出来的工具，非常不错，微信公 众平台也在用他，尤其是多图片上传的功能，非常不错，那么如果将UEditor中的多图片功能嫁接到CKEditor，是不是就完美了，那就行动吧。


首先，我们得了解CKEditor插件的开发流程。

插件的实现需要放到CKEditor/plugins目录下，建一个我们插件的目录，如multiimg，目录结构看下图：

其中plugin.js是关键的插件描述文件，内容如下：

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. (function() {  
  2.     CKEDITOR.plugins.add("multiimg", {  
  3.         requires: ["dialog"],  
  4.         init: function(a) {  
  5.             a.addCommand("multiimg", new CKEDITOR.dialogCommand("multiimg"));  
  6.             a.ui.addButton("multiimg", {  
  7.                 label: "批量上传图片",//调用dialog时显示的名称  
  8.                 command: "multiimg",  
  9.                 icon: this.path + "g.ico"//在toolbar中的图标  
  10.   
  11.             });  
  12.             CKEDITOR.dialog.add("multiimg", this.path + "dialogs/multiimg.js")  
  13.   
  14.         }  
  15.   
  16.     })  
  17.   
  18. })();  

如上所述，plugin.js文件定义了插件的基本信息，这里，我们的插件在CKEditor上添加了一个多图片上传的按钮，点击按钮后，他会打开一个对话框，对话框加载dialogs下的multiimg.js，我们来看一下这个js的内容：
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. (function() {  
  2.     CKEDITOR.dialog.add("multiimg",  
  3.         function(a) {  
  4.             return {  
  5.                 title: "批量上传图片",  
  6.                 minWidth: "660px",  
  7.                 minHeight:"400px",  
  8.                 contents: [{  
  9.                     id: "tab1",  
  10.                     label: "",  
  11.                     title: "",  
  12.                     expand: true,  
  13.                     width: "420px",  
  14.                     height: "300px",  
  15.                     padding: 0,  
  16.                     elements: [{  
  17.                         type: "html",  
  18.                         style: "width:660px;height:400px",  
  19.                         html: '<iframe id="uploadFrame" src="/image/image.html?v=' +new Date().getSeconds() + '" frameborder="0"></iframe>'  
  20.                     }]  
  21.                 }],  
  22.                 onOk: function() {  
  23.                     var ins = a;  
  24.                     var num = window.imgs.length;  
  25.                     if(window.duiqi == undefined || window.duiqi == null){  
  26.                         window.duiqi = "none";  
  27.                     }  
  28.                     for(var i=0;i<num;i++){  
  29.                         var imgHtml = "<p";  
  30.                         if("center" == window.duiqi){  
  31.                             imgHtml += " style=\"text-align:center\">";  
  32.                         }else{  
  33.                             imgHtml += ">";  
  34.                         }  
  35.   
  36.                         imgHtml += "<img src=\"" + window.imgs[i].url + "\" ";  
  37.                         if("none" != window.duiqi && "center" != window.duiqi){  
  38.                             imgHtml += "style=\"float: " + window.duiqi + ";\"/>";  
  39.                         }else{  
  40.                             imgHtml += "/>";  
  41.                         }  
  42.                         imgHtml += "</p>";  
  43.                         ins.insertHtml(imgHtml);  
  44.                     }  
  45.                     window.imgs = new Array();  
  46.                     //点击确定按钮后的操作  
  47.                     //a.insertHtml("编辑器追加内容");  
  48.                 },  
  49.                 onShow: function () {  
  50.                     document.getElementById("uploadFrame").setAttribute("src","/image/image.html?v=' +new Date().getSeconds() + '");  
  51.                 }  
  52.             }  
  53.         })  
  54. })();  
我们的实现也比较简单，对话框加载了一个iframe，iframe就默认打开UEditor的图片上传控件。

启程上文，我们继续来讲如何在CKEditor中添加多图片上传控件。

我们先贴一张最终的演示图给大家看一下：


点击CKEditor上的上传多图片按钮，就会弹出这个对话框，这里我们使用的是UEditor中的多图片上传控件。

如何实现呢，其实就是从UEditor中把这块扣出来单用了。

我们来贴一下iframe下的页面吧：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2.         "http://www./TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5.     <title></title>  
  6.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>  
  7.     <link rel="stylesheet" href="image.css" type="text/css"/>  
  8.     <script type="text/javascript" src="/js/login/jquery-1.7.2.min1c6c0c.js"></script>  
  9.     <script type="text/javascript" src="Default.js"></script>  
  10.     <style type="text/css">  
  11.         body{ font-size:12px; font-family:微软雅黑;}  
  12.         .up_tit{ width:620px; line-height:30px; display:table; height:30px; background-color:#ccc;}  
  13.         .up_ddl{ float:left;}  
  14.         .up_ddl div{ display:inline-block;}  
  15.         .up_sy{ float:right;}  
  16.         #updisable{ color:#666;}  
  17.         #upload {  
  18.             cursor: pointer;  
  19.             float: right;  
  20.             height: 30px;  
  21.             margin: 3px 6px 0 0;  
  22.             width: 100px;  
  23.         }  
  24.     </style>  
  25.   
  26. </head>  
  27. <body>  
  28. <div class="wrapper">  
  29.     <div id="imageTab">  
  30.         <div id="tabHeads" class="tabhead">  
  31.             <span tabSrc="local"><var id="lang_tab_local"></var></span>  
  32.         </div>  
  33.         <div id="tabBodys" class="tabbody">  
  34.             <!--隐藏域，用来保存Flash中选择的文件个数，从而判定上传按钮是否可用--->  
  35.             <input id="curCount" name="curCount" type="hidden" value="0" />  
  36.             <div class="panel" id="local" style="z-index: 200;">  
  37.                 <div id="flashContainer">  
  38.                     <object width="608" height="272" align="middle" id="flash"  
  39.                             codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"  
  40.                             classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">  
  41.                         <param value="window" name="wmode">  
  42.                         <param value="imageUploader.swf" name="movie">  
  43.                         <param value="container=flashContainer&url=/imageUp.jsp&ext=%7B%22fileNameFormat%22%3A%22%7Btime%7D%7Brand%3A6%7D%22%7D&fileType=%7B%22description%22%3A%22%E5%9B%BE%E7%89%87%22%2C%20%22extension%22%3A%22*.gif%3B*.jpeg%3B*.png%3B*.jpg%22%7D&flashUrl=imageUploader.swf&width=608&height=272&gridWidth=121&gridHeight=120&picWidth=100&picHeight=100&uploadDataFieldName=upfile&picDescFieldName=pictitle&maxSize=4&compressSize=2&maxNum=32&compressSide=0&compressLength=900"  
  44.                                name="flashvars">  
  45.                         <embed width="608" height="272" align="middle"  
  46.                                pluginspage="http://www.macromedia.com/go/getflashplayer"  
  47.                                type="application/x-shockwave-flash" name="flash" src="imageUploader.swf"  
  48.                                flashvars="container=flashContainer&url=/imageUp.jsp&ext=%7B%22fileNameFormat%22%3A%22%7Btime%7D%7Brand%3A6%7D%22%7D&fileType=%7B%22description%22%3A%22%E5%9B%BE%E7%89%87%22%2C%20%22extension%22%3A%22*.gif%3B*.jpeg%3B*.png%3B*.jpg%22%7D&flashUrl=imageUploader.swf&width=608&height=272&gridWidth=121&gridHeight=120&picWidth=100&picHeight=100&uploadDataFieldName=upfile&picDescFieldName=pictitle&maxSize=4&compressSize=2&maxNum=32&compressSide=0&compressLength=900"  
  49.                                ver="10.0.0" wmode="window" errormessage="Flash插件初始化失败，请更新您的FlashPlayer版本之后重试！">  
  50.                     </object>  
  51.                 </div>  
  52.                 <div><div style="background: url('images/upload.png') repeat scroll 0% 0% transparent;" id="upload"></div><div id="duiqi" style="background: url('images/imglabel.png') no-repeat scroll -12px 2px transparent;"></div><div id="localFloat"></div></div>  
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56. </div>  
  57. <script type="text/javascript">  
  58.     $(function(){  
  59.         var ci = "#localFloat";  
  60.         var floatContainer = $(ci),  
  61.                 nameMaps = {"none":"默认", "left":"左浮动", "right":"右浮动", "center":"居中"};  
  62.         for (var j in nameMaps) {  
  63.             var div = document.createElement("div");  
  64.             div.setAttribute("name", j);  
  65.             if (j == "none") div.className = "focus";  
  66.   
  67.             div.style.cssText = "background:url(images/" + j + "_focus.jpg);";  
  68.             div.setAttribute("title", nameMaps[j]);  
  69.             floatContainer.append(div);  
  70.         }  
  71.         switchSelect(ci);  
  72.     });  
  73.     /**  
  74.      * 选择切换，传入一个container的ID  
  75.      * @param selectParentId  
  76.      */  
  77.     function switchSelect(selectParentId) {  
  78.         var select = $(selectParentId);  
  79.         select.on("click", function (evt) {  
  80.             var tar = evt.srcElement || evt.target;  
  81.             select.children().attr("class","");  
  82.             tar.className = "focus";  
  83.             parent.duiqi = tar.getAttribute("name");  
  84.         });  
  85.     }  
  86. </script>  
  87. </body>  
  88.   
  89. </html>  

再来看一下Default.js文件：
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. parent.imgs = new Array();  
  2. /***********************Flash事件*****************************/  
  3. /** 
  4. * 检查flash状态 
  5. * @private 
  6. * @param {Object} target flash对象 
  7. * @return {Boolean} 
  8. */  
  9. function _checkReady(target) {  
  10.     if (typeof target !== 'undefined' && typeof target.flashInit !== 'undefined' && target.flashInit()) {  
  11.         return true;  
  12.     } else {  
  13.         return false;  
  14.     }  
  15. }  
  16. /** 
  17. * 创建一个随机的字符串 
  18. * @private 
  19. * @return {String} 
  20. */  
  21. function _createString() {  
  22.     var prefix = 'mw__flash__';  
  23.     return prefix + Math.floor(Math.random() * 2147483648).toString(36);  
  24. }  
  25.   
  26. /** 
  27. * 为传入的匿名函数创建函数名 
  28. * @private 
  29. * @param {String|Function} fun 传入的匿名函数或者函数名 
  30. * @return {String} 
  31. */  
  32. function _createFunName(fun) {  
  33.     var name = '';  
  34.     name = _createString();  
  35.     window[name] = function () {  
  36.         fun.apply(window, arguments);  
  37.     };  
  38.     return name;  
  39. }  
  40. /*** 
  41. 反复判断Flash是欧加载完成,完成后为Flash添加回调函数.. 
  42. */  
  43. var interval = setInterval(function () {  
  44.     try {  
  45.         var flash = thisMovie("flash");  
  46.         if (_checkReady(flash)) {               //轮询flash的某个方法即可  
  47.   
  48.             var callBack = [];  
  49.             callBack[0] = _createFunName(selectFileCallback);  
  50.             callBack[1] = _createFunName(exceedFileCallback);  
  51.             callBack[2] = _createFunName(deleteFileCallback);  
  52.             callBack[3] = _createFunName(StartUploadCallback);  
  53.             callBack[4] = _createFunName(uploadCompleteCallback);  
  54.             callBack[5] = _createFunName(uploadErrorCallback);  
  55.             callBack[6] = _createFunName(allCompleteCallback);  
  56.             callBack[7] = _createFunName(changeHeightCallback);  
  57.             thisMovie("flash").call('setJSFuncName', [callBack]);  
  58.   
  59.             clearInterval(interval);  
  60.         }  
  61.     }  
  62.     catch (ex) {  
  63.     }  
  64. }, 20);  
  65.   
  66. //获得Flash对象  
  67. function thisMovie(movieName) {  
  68.     if (navigator.appName.indexOf("Misrosoft") != -1) {  
  69.         return window[movieName];  
  70.     }  
  71.     else {  
  72.         return document[movieName];  
  73.     }  
  74. }  
  75. //事件  
  76. $(function () {  
  77.     $("#upload").live("click", function () { return upload(); });  
  78.   
  79. });  
  80. function Setbtn(count) {  
  81. ////    if ($("#ddlAlbum").val() != "0") {  
  82. //        if (count > 0) {  
  83. ////            $("#updisable").hide();  
  84. //            $("#upload").show();  
  85. //        }  
  86. //        else {  
  87. ////            $("#updisable").show();  
  88. //            $("#upload").hide();  
  89. //        }  
  90. ////    }  
  91.     $("#curCount").val(count);  
  92. }  
  93. // 通过添加文件按钮新增的需要上传文件  
  94. function selectFileCallback(selectFiles) {  
  95.     var count = $("#curCount").val();  
  96.     count = parseInt(count) + selectFiles.length;  
  97.     Setbtn(count);  
  98. }  
  99. // 文件超出限制的最大体积时的回调  
  100. function exceedFileCallback(selectFiles) {  
  101.   
  102. }  
  103. //被删除的文件: 用于控制上传按钮是否显示...  
  104. function deleteFileCallback(delFiles) {  
  105.     var count = $("#curCount").val();  
  106.     count = parseInt(count) - delFiles.length;  
  107.     Setbtn(count);  
  108. }  
  109. //开始上传前执行的JS函数.  
  110. function StartUploadCallback(data) {  
  111.   
  112. }  
  113. //上传单个文件后执行的JS函数.  
  114. function uploadCompleteCallback(data) {  
  115.     try {  
  116.         var info = eval("(" + data.info + ")");  
  117.         info && parent.imgs.push(info);  
  118.         var count = $("#curCount").val();  
  119.         count = parseInt(count) - 1;  
  120.         Setbtn(count);  
  121.     } catch (e) {alert(e)}  
  122. }  
  123. //上传失败后执行的JS函数.  
  124. function uploadErrorCallback(data) {  
  125.     if (!data.info) {  
  126.         alert("照片上传失败，请刷新后重试");  
  127.         window.location.reload();  
  128.     }  
  129. }  
  130. //全部完成上传后执行::定向到相册界面  
  131. function allCompleteCallback(data) {  
  132. //    alert("上传成功！" + parent.imgs);  
  133. //    window.location.reload();  
  134. }  
  135. //改变Flash高度时执行  
  136. function changeHeightCallback(data) {  
  137.   
  138. }  
  139. //开始上传:添加参数：aid，表示相册， mark，表示水印，需要为每个照片都添加这两个参数。。  
  140. function upload() {  
  141. //    var count = parseInt($("#curCount").val());  
  142. //    for (var i = 0; i < count; i++) {  
  143. //        thisMovie("flash").addCustomizedParams(i, { "aid": $("#ddlAlbum").val(), "mark": $("#mark").attr("checked") == true });  
  144. //    }  
  145.     thisMovie("flash").upload();  
  146.   
  147. }   

到此，所有的功能就实现了!

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 看见就非常 > 《server》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多