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é)構(gòu)看下圖：

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

[javascript] view plain copy

(function() {
CKEDITOR.plugins.add("multiimg", {
requires: ["dialog"],
init: function(a) {
a.addCommand("multiimg", new CKEDITOR.dialogCommand("multiimg"));
a.ui.addButton("multiimg", {
label: "批量上傳圖片",//調(diào)用dialog時顯示的名稱
command: "multiimg",
icon: this.path + "g.ico"//在toolbar中的圖標(biāo)
});
CKEDITOR.dialog.add("multiimg", this.path + "dialogs/multiimg.js")
}
})
})();

如上所述，plugin.js文件定義了插件的基本信息，這里，我們的插件在CKEditor上添加了一個多圖片上傳的按鈕，點擊按鈕后，他會打開一個對話框，對話框加載dialogs下的multiimg.js，我們來看一下這個js的內(nèi)容：

[javascript] view plain copy

(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("編輯器追加內(nèi)容");
},
onShow: function () {
document.getElementById("uploadFrame").setAttribute("src","/image/image.html?v=' +new Date().getSeconds() + '");
}
}
})
})();

我們的實現(xiàn)也比較簡單，對話框加載了一個iframe，iframe就默認打開UEditor的圖片上傳控件。

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

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

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

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

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

[html] view plain copy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="image.css" type="text/css"/>
<script type="text/javascript" src="/js/login/jquery-1.7.2.min1c6c0c.js"></script>
<script type="text/javascript" src="Default.js"></script>
<style type="text/css">
body{ font-size:12px; font-family:微軟雅黑;}
.up_tit{ width:620px; line-height:30px; display:table; height:30px; background-color:#ccc;}
.up_ddl{ float:left;}
.up_ddl div{ display:inline-block;}
.up_sy{ float:right;}
#updisable{ color:#666;}
#upload {
cursor: pointer;
float: right;
height: 30px;
margin: 3px 6px 0 0;
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="imageTab">
<div id="tabHeads" class="tabhead">
<span tabSrc="local"><var id="lang_tab_local"></var></span>
</div>
<div id="tabBodys" class="tabbody">
<input id="curCount" name="curCount" type="hidden" value="0" />
<div class="panel" id="local" style="z-index: 200;">
<div id="flashContainer">
<object width="608" height="272" align="middle" id="flash"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="window" name="wmode">
<param value="imageUploader.swf" name="movie">
<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"
name="flashvars">
<embed width="608" height="272" align="middle"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" name="flash" src="imageUploader.swf"
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"
ver="10.0.0" wmode="window" errormessage="Flash插件初始化失敗，請更新您的FlashPlayer版本之后重試！">
</object>
</div>
<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>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var ci = "#localFloat";
var floatContainer = $(ci),
nameMaps = {"none":"默認", "left":"左浮動", "right":"右浮動", "center":"居中"};
for (var j in nameMaps) {
var div = document.createElement("div");
div.setAttribute("name", j);
if (j == "none") div.className = "focus";
div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
div.setAttribute("title", nameMaps[j]);
floatContainer.append(div);
}
switchSelect(ci);
});
/**
* 選擇切換，傳入一個container的ID
* @param selectParentId
*/
function switchSelect(selectParentId) {
var select = $(selectParentId);
select.on("click", function (evt) {
var tar = evt.srcElement || evt.target;
select.children().attr("class","");
tar.className = "focus";
parent.duiqi = tar.getAttribute("name");
});
}
</script>
</body>
</html>

再來看一下Default.js文件：

[javascript] view plain copy

parent.imgs = new Array();
/***********************Flash事件*****************************/
/**
* 檢查flash狀態(tài)
* @private
* @param {Object} target flash對象
* @return {Boolean}
*/
function _checkReady(target) {
if (typeof target !== 'undefined' && typeof target.flashInit !== 'undefined' && target.flashInit()) {
return true;
} else {
return false;
}
}
/**
* 創(chuàng)建一個隨機的字符串
* @private
* @return {String}
*/
function _createString() {
var prefix = 'mw__flash__';
return prefix + Math.floor(Math.random() * 2147483648).toString(36);
}
/**
* 為傳入的匿名函數(shù)創(chuàng)建函數(shù)名
* @private
* @param {String|Function} fun 傳入的匿名函數(shù)或者函數(shù)名
* @return {String}
*/
function _createFunName(fun) {
var name = '';
name = _createString();
window[name] = function () {
fun.apply(window, arguments);
};
return name;
}
/***
反復(fù)判斷Flash是歐加載完成,完成后為Flash添加回調(diào)函數(shù)..
*/
var interval = setInterval(function () {
try {
var flash = thisMovie("flash");
if (_checkReady(flash)) { //輪詢flash的某個方法即可
var callBack = [];
callBack[0] = _createFunName(selectFileCallback);
callBack[1] = _createFunName(exceedFileCallback);
callBack[2] = _createFunName(deleteFileCallback);
callBack[3] = _createFunName(StartUploadCallback);
callBack[4] = _createFunName(uploadCompleteCallback);
callBack[5] = _createFunName(uploadErrorCallback);
callBack[6] = _createFunName(allCompleteCallback);
callBack[7] = _createFunName(changeHeightCallback);
thisMovie("flash").call('setJSFuncName', [callBack]);
clearInterval(interval);
}
}
catch (ex) {
}
}, 20);
//獲得Flash對象
function thisMovie(movieName) {
if (navigator.appName.indexOf("Misrosoft") != -1) {
return window[movieName];
}
else {
return document[movieName];
}
}
//事件
$(function () {
$("#upload").live("click", function () { return upload(); });
});
function Setbtn(count) {
//// if ($("#ddlAlbum").val() != "0") {
// if (count > 0) {
//// $("#updisable").hide();
// $("#upload").show();
// }
// else {
//// $("#updisable").show();
// $("#upload").hide();
// }
//// }
$("#curCount").val(count);
}
// 通過添加文件按鈕新增的需要上傳文件
function selectFileCallback(selectFiles) {
var count = $("#curCount").val();
count = parseInt(count) + selectFiles.length;
Setbtn(count);
}
// 文件超出限制的最大體積時的回調(diào)
function exceedFileCallback(selectFiles) {
}
//被刪除的文件: 用于控制上傳按鈕是否顯示...
function deleteFileCallback(delFiles) {
var count = $("#curCount").val();
count = parseInt(count) - delFiles.length;
Setbtn(count);
}
//開始上傳前執(zhí)行的JS函數(shù).
function StartUploadCallback(data) {
}
//上傳單個文件后執(zhí)行的JS函數(shù).
function uploadCompleteCallback(data) {
try {
var info = eval("(" + data.info + ")");
info && parent.imgs.push(info);
var count = $("#curCount").val();
count = parseInt(count) - 1;
Setbtn(count);
} catch (e) {alert(e)}
}
//上傳失敗后執(zhí)行的JS函數(shù).
function uploadErrorCallback(data) {
if (!data.info) {
alert("照片上傳失敗，請刷新后重試");
window.location.reload();
}
}
//全部完成上傳后執(zhí)行::定向到相冊界面
function allCompleteCallback(data) {
// alert("上傳成功！" + parent.imgs);
// window.location.reload();
}
//改變Flash高度時執(zhí)行
function changeHeightCallback(data) {
}
//開始上傳:添加參數(shù)：aid，表示相冊， mark，表示水印，需要為每個照片都添加這兩個參數(shù)。。
function upload() {
// var count = parseInt($("#curCount").val());
// for (var i = 0; i < count; i++) {
// thisMovie("flash").addCustomizedParams(i, { "aid": $("#ddlAlbum").val(), "mark": $("#mark").attr("checked") == true });
// }
thisMovie("flash").upload();
}

到此，所有的功能就實現(xiàn)了!

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

开心六月综合激情婷婷|欧美精品成人动漫二区|国产中文字幕综合色|亚洲人在线成视频