导读：给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义
给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能
1、首先下载并安装ckeditor。
2、下载swfupload解压拷贝到对应的文件目录下
3、自定义工具栏按钮:
我们可以自定义ckeditor工具栏要显示的按钮，工具栏按钮定义可以参考这里。
现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\ 目录中。我们在ckeditor\plugins\中创建一个新文件夹imagedef。在imagedef文件夹内，我们创建一个plugin.js文件，它的代码如下：
CKEDITOR.plugins.add(
"imagedef",
{
requires:["dialog"], //当按钮触发时弹出对话框
init:function (a)
{
a.addCommand("imagedef", new CKEDITOR.dialogCommand("imagedef"));
a.ui.addButton(
"Imagedef",
{
label:"图片",
command:"imagedef",
icon:this.path + "imagedef.gif"
});
CKEDITOR.dialog.add("imagedef", this.path + "dialogs/imagedef.js");
}
}
);
在上面的代码中我们指定自定义按钮的图标imagedef.gif，imagedef.gif放在imagedef文件夹中。
在imagedef文件夹下新建一个dialogs目录，在dialogs目录下新建一个imagedef.js文件，就是上面代码调用的imagedef.js文件
CKEDITOR.dialog.add(
"imagedef",
function (b)
{
return {
title:"图片",
minWidth:590,
minHeight:300,
contents:[{
id:"tab1",
label:"",
title:"",
expand:true,
padding:0,
elements:[{
type:"html",
html:initImageDlgInnerHtml() //对话框中要显示的内容，这里的代码将发在下面
}]
}],
onOk: function(){ //对话框点击确定的时候调用该函数
var D = this;
var imes = getCkUploadImages();//获取上传的图片，用于取路径，将图片显示在富文本编辑框中
$(imes).each(function(){
D.imageElement = b.document.createElement('img');
D.imageElement.setAttribute('alt', '');
D.imageElement.setAttribute('_cke_saved_src', $(this).attr("src"));
D.imageElement.setAttribute('src', $(this).attr("src"));
D.commitContent(1, D.imageElement);
if (!D.imageElement.getAttribute('style')){
D.imageElement.removeAttribute('style');
}
b.insertElement(D.imageElement);
});
},
onLoad: function(){ //对话框初始化时调用
initEventImageUpload(); //用于注册上传swfupload组件
},
onShow:function(){
clearCkImageUpload(); //在对话框显示时作一些特殊处理
}
};
}
);
接下来我们需要注册imagedef插件。原文中的给出方法是在ckeditor.js中注册，这会使以后升级新版本遇到困难。提倡使用下面的方法在config.js中注册自定义插件：
CKEDITOR.editorConfig = function( config )
{
config.toolbar_Full = [
['Source','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Imagedef','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
config.resize_maxWidth = 775;
config.removePlugins='elementspath';//去掉文本框下面出现body p 等
config.extraPlugins="imagedef"; //注册自定义按钮
};
最后，在ckeditor中显示自定义按钮linkbutton，代码如下：
下面代码是在页面上写的，当然可以根据自己的需求来定，写在什么位置
//编辑框初始化上传图片的回调----------自定义按钮插件
function initImageDlgInnerHtml(){ //这是在对话框中要显示的内容
var iHtml = "<div style='float:left;width:100%'>上传到服务器上</div>" ;
iHtml += "<div style='float:left;width:100%;' class='setUpload'>";
iHtml += "<div style='float:left;height:24px;width:82px' class='su_img'><span id='ck_btn_id'>dssdf</span></div>";
iHtml += "<div style='float:left' id='ck_fs_upload_progress'>未选择文件</div>";
iHtml += "</div>";
iHtml += "<div style='float:left;width:100%'><input id='stop_id' type='button' vlaue='终止'/><input id='ck_btn_start' class='cke_dialog_start_button_z' type='button' value='开始上传' style='float:left' onclick='ckUploadImageStart();'/></div>";
iHtml += "<div id='ck_pic_div' style='float:left;width:100%'></div>";
return iHtml;
}
上面有个cke_dialog_start_button_z样式是根据自己的需要来写的
function initEventImageUpload(){ //对上传控件的注册
ckeditorInitSwfu("ck_fs_upload_progress","stop_id","ck_btn_id");
$("#ck_fs_upload_progress").parent().find("object").css({"height":"24px","width":"82px"});
$("#ck_btn_start").mouseover(function(){
$(this).css({"cursor":"hand","background-position":"0 -1179px"});
});
}
function clearCkImageUpload(){ //对对话框弹出时作特殊处理
if($("#ck_fs_upload_progress").html().indexOf(".jpg") != -1){
$("#ck_fs_upload_progress").html("");
}
$("#ck_pic_div").html("");
}
function getCkUploadImages(){
return $("#ck_pic_div").find("img");
}
var ckSwfu; //初始化上传控件
function ckeditorInitSwfu(progress,btn,spanButtonPlaceHolder) {
var uploadUrl = "${BasePath}/commodity_com/img/uploadCommodityImg.ihtml?type=1";
//在firefox、chrome下，上传不能保留登录信息，所以必须加上jsessionid。
var jsessionid = $.cookie("JSESSIONID");
if(jsessionid) {
uploadUrl += "?jsessionid="+jsessionid;
}
ckSwfu=new SWFUpload({
upload_url : uploadUrl,
flash_url : "${BasePath}/res/base/plugin/swfupload/swfupload.swf",
file_size_limit : "4 MB",
file_types : "*.jpg;*.png;*.gif;*.jpeg;*.bmp",
file_types_description : "Web Image Files",
file_queue_limit : 0,
custom_settings : {
progressTarget : progress,
cancelButtonId : btn
},
debug: false,
button_image_url : "${BasePath}/res/base/plugin/swfupload/button_notext.png",
button_placeholder_id : spanButtonPlaceHolder,
button_text: "<span class='btnText'>上传图片</span>",
button_width: 81,
button_height: 24,
button_text_top_padding: 2,
button_text_left_padding: 20,
button_text_style: '.btnText{color:#666666;}',
button_cursor:SWFUpload.CURSOR.HAND,
file_queued_handler : fileQueuedCk,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogCompleteCk,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccessCk,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete
});
};
//开始上传图片
function ckUploadImageStart(obj){
ckSwfu.startUpload();
}
//回调重写
function fileQueuedCk(file) {
try {
if($("#ck_fs_upload_progress").html().indexOf(".jpg") == -1){
$("#ck_fs_upload_progress").html("");
}
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setStatus("Pending...");
progress.toggleCancel(true, this);
$(progress.fileProgressWrapper).css("display","none");
$("#ck_fs_upload_progress").append(" "+file.name);
} catch (ex) {
this.debug(ex);
}
}
//回调重写，上传成功后
function uploadSuccessCk(file, serverData) {
try {
var progress = new FileProgress(file, swfu.customSettings.progressTarget);
//progress.setComplete();
//progress.setStatus("上传成功！");
//progress.toggleCancel(false);
$(progress.fileProgressWrapper).css("display","none");
var json = eval("("+serverData+")");
var img = '<div style="float:left;"><img picUrl="'+json.url+'" src="${BasePath!''}/'+json.url+'" style="width:80px;height:80px"/><a href="javascript：void(0)" onclick="deletePic(this)">X</a></div>';
$("#ck_pic_div").append(img);
$("#ck_pic_div").dragsort("destroy"); //图片排序，这里要下载dragsort插件
$("#ck_pic_div").dragsort({ dragSelector: "div", dragBetween: true, placeHolderTemplate: "<div class='placeHolder' style='float:left'><img /><a></a></div>" });
} catch (ex) {
}
}
//回调重写，主要是设置参数，如果需要的参数没有，就清空上传的文件，为了解决下次选择会上传没有参数时的图片
function fileDialogCompleteCk(numFilesSelected, numFilesQueued) {
try {
var commoNo = $("#commoNo").val();
var brandNo = $("#brand option:selected").val();
var catNo = $("#thirdCommon option:selected").val();
//初始化上传图片
if(brandNo != "" && commoNo != "" && catNo != "") {
this.addPostParam("commoNo",commoNo);
this.addPostParam("thirdCatNo",catNo);
this.addPostParam("brandNo",brandNo);
if (numFilesSelected > 0) {
document.getElementById(this.customSettings.cancelButtonId).disabled = false;
}
} else {
for(var i=0;i<numFilesSelected;i++){
var promitId = this.customSettings.progressTarget;
$("#"+promitId).find("*").remove();
var fileId = this.getFile().id;
this.cancelUpload(fileId,false);
}
$("#ck_fs_upload_progress").html("");
alert("请选择分类和品牌！");
}
} catch (ex) {
this.debug(ex);
}
}
