国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
CKEditor 多圖片上傳插件（一） （二）

2014-04-10 18:47 77人閱讀 評論(0) 收藏 舉報

CKEditor是目前不錯的一個在線Html可視化編輯工具，但是他的圖片上傳功能有點弱了，只能單張單張的上傳，很麻煩。

偶爾一次發(fā)現(xiàn)UEditor（http://ueditor.baidu.com/website/），這個百度開源出來的工具，非常不錯，微信公眾平臺也在用他，尤其是多圖片上傳的功能，非常不錯，那么如果將UEditor中的多圖片功能嫁接到CKEditor，是不是就完美了，那就行動吧。


首先，我們得了解CKEditor插件的開發(fā)流程。

插件的實現(xiàn)需要放到CKEditor/plugins目錄下，建一個我們插件的目錄，如multiimg，目錄結(jié)構看下圖：

其中plugin.js是關鍵的插件描述文件，內(nèi)容如下：

[javascript] view plaincopy
  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: "批量上傳圖片",//調(diào)用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的內(nèi)容：
[javascript] view plaincopy
  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("編輯器追加內(nèi)容");  
  48.                 },  
  49.                 onShow: function () {  
  50.                     document.getElementById("uploadFrame").setAttribute("src","/image/image.html?v=' +new Date().getSeconds() + '");  
  51.                 }  
  52.             }  
  53.         })  
  54. })();  
我們的實現(xiàn)也比較簡單，對話框加載了一個iframe，iframe就默認打開UEditor的圖片上傳控件。

啟程上文，我們繼續(xù)來講如何在CKEditor中添加多圖片上傳控件。

我們先貼一張最終的演示圖給大家看一下：


點擊CKEditor上的上傳多圖片按鈕，就會彈出這個對話框，這里我們使用的是UEditor中的多圖片上傳控件。

如何實現(xiàn)呢，其實就是從UEditor中把這塊扣出來單用了。

我們來貼一下iframe下的頁面吧：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2.         "http://www.w3.org/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中選擇的文件個數(shù)，從而判定上傳按鈕是否可用--->  
  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
  1. parent.imgs = new Array();  
  2. /***********************Flash事件*****************************/  
  3. /** 
  4. * 檢查flash狀態(tài) 
  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. * 創(chuàng)建一個隨機的字符串 
  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. * 為傳入的匿名函數(shù)創(chuàng)建函數(shù)名 
  28. * @private 
  29. * @param {String|Function} fun 傳入的匿名函數(shù)或者函數(shù)名 
  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添加回調(diào)函數(shù).. 
  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. // 文件超出限制的最大體積時的回調(diào)  
  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. //開始上傳前執(zhí)行的JS函數(shù).  
  110. function StartUploadCallback(data) {  
  111.   
  112. }  
  113. //上傳單個文件后執(zhí)行的JS函數(shù).  
  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. //上傳失敗后執(zhí)行的JS函數(shù).  
  124. function uploadErrorCallback(data) {  
  125.     if (!data.info) {  
  126.         alert("照片上傳失敗，請刷新后重試");  
  127.         window.location.reload();  
  128.     }  
  129. }  
  130. //全部完成上傳后執(zhí)行::定向到相冊界面  
  131. function allCompleteCallback(data) {  
  132. //    alert("上傳成功！" + parent.imgs);  
  133. //    window.location.reload();  
  134. }  
  135. //改變Flash高度時執(zhí)行  
  136. function changeHeightCallback(data) {  
  137.   
  138. }  
  139. //開始上傳:添加參數(shù)：aid，表示相冊， mark，表示水印，需要為每個照片都添加這兩個參數(shù)。。  
  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. }   

到此，所有的功能就實現(xiàn)了!
本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
如何將ckeditor圖片上傳簡化到只有上傳功能
ckeditor 自己寫的一個簡單的image上傳js 運用iframe的ajax上傳
百度編輯器（UEditor）開發(fā)系列——調(diào)用上傳圖片、上傳文件等模塊
百度UEditor控件中的map組件不支持https使用的問題解決
用Ueditor為Asp.net mvc打造可視化HTML編輯器
使用easeui dialog彈出框中使用CKeditor多次加載后無法編輯問題
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服