ct-ckeditor
Version:
ct-ckeditor
160 lines (135 loc) • 6.21 kB
JavaScript
CKEDITOR.dialog.add('uploadpictures', function(editor) {
var imageHtml = '', uploader;
var lang = editor.lang.uploadpictures;
var initEvent = function () {
function receiveMessage(event) {
var eventName = event.data.eventName;
if (eventName === 'es-ckeditor.post') {
var innerHtml = event.data.html;
$('.' + editor.id + ' #js-uploadpictures-body').append(innerHtml);
try{
$(document.getElementById("uploadContainer_" + editor.name))[0].remove();
}catch(err){
$(document.getElementById("uploadContainer_" + editor.name))[0].removeNode(true);
};
onLoadDialog();
}
}
window.addEventListener("message", receiveMessage, false);
};
initEvent();
var onLoadDialog = function() {
var uploadUrl = editor.config.filebrowserImageUploadUrl;
uploadUrl += uploadUrl.indexOf('?') == -1 ? '?' : '&';
uploadUrl += 'CKEditorFuncNum=0&isWebuploader=1';
var fileSingleSizeLimit = editor.config.fileSingleSizeLimit;
uploader = WebUploader.create({
swf: CKEDITOR.getUrl('plugins/uploadpictures/webuploader/Uploader.swf'),
server: uploadUrl,
pick: '.' + editor.id + ' .ckeditor-uploadpictures-pick-btn',
compress: {
width: 1200,
height: 8000,
quality: 90,
allowMagnify: false,
crop: false,
preserveHeaders: true
},
resize: false,
fileNumLimit: 10,
threads: 1,
fileSingleSizeLimit: fileSingleSizeLimit*1024*1024,
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png,ico',
mimeTypes: 'image/*'
}
});
$('.js-start-upload-btn').on('click', function() {
uploader.upload();
});
uploader.on('error', function(errorCode) {
if (errorCode == 'Q_TYPE_DENIED') {
alert(lang.file_type_tip + uploader.options.accept[0].extensions.join(','));
} else if (errorCode == 'F_EXCEED_SIZE') {
alert(lang.single_file_max_size_tip + filesize(uploader.options.fileSingleSizeLimit));
}
});
uploader.on('fileQueued', function(file) {
$('.' + editor.id + ' .balloon-nofile').remove();
var $list = $('.' + editor.id + ' .balloon-filelist ul');
$list.append(
'<li id="' + file.id + '">' +
' <div class="file-name">' + file.name + '</div>' +
' <div class="file-size">' + filesize(file.size) + '</div>' +
' <div class="file-status">' + lang.waiting_upload_text + '</div>' +
' <div class="file-remove">' + lang.delete_text + '</div>' +
' <div class="file-progress"><div class="file-progress-bar" style="width: 0%;"></div></div>' +
'</li>'
);
});
$('.' + editor.id + ' .balloon-filelist').delegate('.file-remove', 'click', function(){
uploader.removeFile($(this).parent('li').attr('id'), true);
$(this).parent().remove();
});
uploader.on('uploadProgress', function(file, percentage) {
var $li = $('.' + editor.id + ' #' + file.id);
percentage = (percentage * 100).toFixed(2) + '%';
$li.find('.file-status').html(percentage);
$li.find('.file-progress-bar').css('width', percentage);
});
uploader.on('uploadSuccess', function(file, response) {
console.log('file', response);
imageHtml += '<p><img src="' + response.url + '" /></p>';
var $li = $('.' + editor.id + ' #' + file.id);
$li.find('.file-status').html(lang.uploaded_text);
$li.find('.file-progress-bar').css('width', '0%');
$li.find('.file-remove').remove();
});
// uploader.on('uploadFinished', function() {
// });
};
var url = CKEDITOR.getUrl('plugins/uploadpictures/html/index_'+editor.config.language+'.html');
var dialogHtml = '<div id="js-uploadpictures-body"><iframe src=' + url + ' scrolling="no" id="uploadContainer_' + editor.name + '" width="0" height="0" style="display:none;visibility:hidden"></iframe></div>';
var dialogDefinition = {
title: editor.lang.uploadpictures.title,
minWidth: 600,
minHeight: 280,
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
buttons: [CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton],
contents: [{
id: 'uploadpictures',
label: editor.lang.uploadpictures.title,
title: editor.lang.uploadpictures.title,
expand: true,
elements: [{
id: "body",
type: "html",
html: dialogHtml
}]
}],
onLoad: function() {
$('.' + editor.id + ' .js-uploadpictures-body').css({'vertical-align': 'top'});
},
onOk: function() {
if (uploader.isInProgress()) {
alert(lang.waiting_finish_tip);
return false;
}
if (uploader.getFiles('inited').length > 0) { //未点击上传
if (!confirm(lang.confirm_clear_tip)) {
return false;
}
}
if (imageHtml) {
editor.insertHtml(imageHtml, 'unfiltered_html');
// editor.insertElement(new CKEDITOR.dom.element.createFromHtml(imageHtml));
imageHtml = ''; //清空
}
//关闭对话框后清除上传列表,因为列表有数量限制
uploader.reset();
$('.' + editor.id + ' .balloon-filelist ul').empty();
}
};
return dialogDefinition;
});