CKEditor Add custom button integration SWFUpload implement bulk upload pictures

CKEditor Add custom button integration SWFUpload implement bulk upload pictures
Add a custom button to CKEditor, because CKEditor can only upload a picture, if you want to upload more than one picture to combine Ckfinder, and Ckfinder is charged, so you want to use custom button integration SWFUpload to upload more than one image function
Download and install CKEditor first.
Download SWFUpload unzip the copy to the corresponding file directory
3. Customize the toolbar buttons:
We can customize the CKEditor toolbar to display the button, the toolbar button definition can refer to here.
Now we need to add a custom Function button to the toolbar. Each button in the CKEditor toolbar is defined as a plug-in in the Ckeditor\plugins\ directory. We create a new folder Imagedef in Ckeditor\plugins\. Within the Imagedef folder, we create a plugin.js file with the following code:
CKEDITOR.plugins.add (
"Imagedef", {
Requires: ["Dialog"],//Popup dialog box when button is triggered
Init:function (a) {
A.addcommand ("Imagedef", New Ckeditor.dialogcommand ("Imagedef"));
A.ui.addbutton (
"Imagedef", {
Label: "Picture",
Command: "Imagedef",
Icon:this.path + "Imagedef.gif"
});
CKEDITOR.dialog.add ("Imagedef", This.path + "dialogs/imagedef.js");
}
}
);
In the code above we specify the icon for the custom button imagedef.gif,imagedef.gif placed in the Imagedef folder.
Create a new dialogs directory under the Imagedef folder and create a new Imagedef.js file in the dialogs directory, which is the imagedef.js file called by the above code
CKEDITOR.dialog.add (
"Imagedef",
function (b)
{
return {
Title: "Pictures",
minwidth:590,
MINHEIGHT:300,
Contents: [{
ID: "TAB1",
Label: "",
Title: "",
Expand:true,
padding:0,
Elements: [{
Type: "HTML",
Html:initimagedlginnerhtml ()//dialog box to display the content, the code here will be sent below
}]
}],
Onok:function () {//dialog box Click OK to call this function
var D = this;
var imes = Getckuploadimages (); Get the uploaded picture, used to fetch the path, and display the picture in the Rich Text edit box
$ (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 () {///dialog box is called when initializing
Initeventimageupload (); For registering the Upload swfupload component
},
Onshow:function () {
Clearckimageupload (); Special handling when the dialog box is displayed
}
};
}
);

Next we need to register the Imagedef plugin. The given method in the original is registered in the Ckeditor.js, which makes it difficult to upgrade the new version later. The following method is advocated for registering a custom plug-in with 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 '; Remove the text box below the body p and so on
Config.extraplugins = "Imagedef"; Registering a custom button
};


Finally, the custom button LinkButton is displayed in CKEditor, with the following code:
The following code is written on the page, of course, according to their own needs to be determined, where to write


edit box to initialize the callback----------the upload image custom button plugin
There's a cke_dialog_start_button_z style that's written according to your needs.
function Initeventimageupload () {//Registration of the upload control
Ckeditorinitswfu ("Ck_fs_upload_progress", "stop_id", "ck_btn_id");
$ ("#ck_fs_upload_progress"). The parent (). Find ("Object"). CSS ({
"Height": "24px",
"width": "82px"
});
$ ("#ck_btn_start"). MouseOver (function () {
$ (this). CSS ({
"Cursor": "Hand",
"Background-position": "0-1179px"
});
});
}

function Clearckimageupload () {//special handling for popup of dialog box
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; Initializing the Upload Control
function Ckeditorinitswfu (Progress, BTN, Spanbuttonplaceholder) {
var uploadurl = "${basepath}/commodity_com/img/uploadcommodityimg.ihtml?type=1";
In Firefox, Chrome, upload cannot keep login information, so must add 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 ' > Upload image </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
});
};

Start uploading pictures
function Ckuploadimagestart (obj) {
Ckswfu.startupload ();
}

Callback Rewrite
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);
}
}

Callback rewrite, after upload successful
function uploadsuccessck (file, serverdata) {
try {
var progress = new Fileprogress (file, swfu.customSettings.progressTarget);
Progress.setcomplete ();
Progress.setstatus ("Upload successful! ");
Progress.togglecancel (FALSE);
$ (progress.fileprogresswrapper). CSS ("display", "none");
var json = eval ("(" + Serverdata + ")");
var img = ' <div style= ' float:left; " >'}/' + 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"); Picture sort, here to download the Dragsort plugin
$ ("#ck_pic_div"). Dragsort ({
Dragselector: "Div",
Dragbetween:true,
Placeholdertemplate: "<div class= ' placeHolder ' style= ' float:left ' ><a></a></div > "
});
} catch (ex) {}
}

Callback rewrite, mainly set parameters, if the required parameters are not, empty the uploaded files, in order to resolve the next selection will upload no parameters when the picture
function Filedialogcompleteck (numfilesselected, numfilesqueued) {
try {

var Commono = $ ("#commoNo"). Val ();
var Brandno = $ ("#brand option:selected"). Val ();
var Catno = $ ("#thirdCommon option:selected"). Val ();
Initialize upload image
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 ("Please select category and Brand!") ");
}
} catch (ex) {
This.debug (ex);
}
}

CKEditor Add custom button integration SWFUpload implement bulk upload pictures