Skip to content

S
solo-1
Commit bbcde74c authored by Van's avatar Van
Browse files
Options

kind editor upload image

parent 357589ad
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 310 deletions
war/src/main/webapp/js/admin/editorKindEditor.js
View file @ bbcde74c
...@@ -50,6 +50,7 @@ admin.editors.KindEditor = { ...@@ -50,6 +50,7 @@ admin.editors.KindEditor = {
} else { } else {
try { try {
this[conf.id] = KindEditor.create('#' + conf.id, { this[conf.id] = KindEditor.create('#' + conf.id, {
'uploadJson' : 'kindeditor/php/upyunUpload.php',
langType: language, langType: language,
items: ["formatblock", "fontname", "fontsize", "|", "bold", "italic", "underline", "strikethrough", "forecolor", "|", items: ["formatblock", "fontname", "fontsize", "|", "bold", "italic", "underline", "strikethrough", "forecolor", "|",
"link", "unlink", "image", "media", "|", "pagebreak", "emoticons", "code", "/", "link", "unlink", "image", "media", "|", "pagebreak", "emoticons", "code", "/",
......
war/src/main/webapp/js/lib/KindEditor/plugins/image/image.js
View file @ bbcde74c
/******************************************************************************* /*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet * KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net * Copyright (C) 2006-2011 kindsoft.net
* *
* @author Roddy <luolonghao@gmail.com> * @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/ * @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php * @licence http://www.kindsoft.net/license.php
*******************************************************************************/ *******************************************************************************/
KindEditor.plugin('image', function(K) { KindEditor.plugin('image', function (K) {
var self = this, name = 'image', var self = this, name = 'image',
allowImageUpload = K.undef(self.allowImageUpload, true), allowImageUpload = K.undef(self.allowImageUpload, true),
formatUploadUrl = K.undef(self.formatUploadUrl, true), allowImageRemote = K.undef(self.allowImageRemote, true),
allowFileManager = K.undef(self.allowFileManager, false), formatUploadUrl = K.undef(self.formatUploadUrl, true),
uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'), allowFileManager = K.undef(self.allowFileManager, false),
imageTabIndex = K.undef(self.imageTabIndex, 0), uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),
imgPath = self.pluginsPath + 'image/images/', imageTabIndex = K.undef(self.imageTabIndex, 0),
extraParams = K.undef(self.extraFileUploadParams, {}), imgPath = self.pluginsPath + 'image/images/',
filePostName = K.undef(self.filePostName, 'imgFile'), extraParams = K.undef(self.extraFileUploadParams, {}),
fillDescAfterUploadImage = K.undef(self.fillDescAfterUploadImage, false), filePostName = K.undef(self.filePostName, 'imgFile'),
lang = self.lang(name + '.'); fillDescAfterUploadImage = K.undef(self.fillDescAfterUploadImage, false),
lang = self.lang(name + '.');
self.plugin.imageDialog = function(options) { self.plugin.imageDialog = function (options) {
var imageUrl = options.imageUrl, var imageUrl = options.imageUrl,
imageWidth = K.undef(options.imageWidth, ''), imageWidth = K.undef(options.imageWidth, ''),
imageHeight = K.undef(options.imageHeight, ''), imageHeight = K.undef(options.imageHeight, ''),
imageTitle = K.undef(options.imageTitle, ''), imageTitle = K.undef(options.imageTitle, ''),
imageAlign = K.undef(options.imageAlign, ''), imageAlign = K.undef(options.imageAlign, ''),
showRemote = K.undef(options.showRemote, true), showRemote = K.undef(options.showRemote, true),
showLocal = K.undef(options.showLocal, true), showLocal = K.undef(options.showLocal, true),
tabIndex = K.undef(options.tabIndex, 0), tabIndex = K.undef(options.tabIndex, 0),
clickFn = options.clickFn; clickFn = options.clickFn;
var target = 'kindeditor_upload_iframe_' + new Date().getTime(); var target = 'kindeditor_upload_iframe_' + new Date().getTime();
var hiddenElements = []; var hiddenElements = [];
for(var k in extraParams){ for (var k in extraParams) {
hiddenElements.push('<input type="hidden" name="' + k + '" value="' + extraParams[k] + '" />'); hiddenElements.push('<input type="hidden" name="' + k + '" value="' + extraParams[k] + '" />');
} }
var html = [ var html = [
'<div style="padding:20px;">', '<div style="padding:20px;">',
//tabs //tabs
'<div class="tabs"></div>', '<div class="tabs"></div>',
//remote image - start //remote image - start
'<div class="tab1" style="display:none;">', '<div class="tab1" style="display:none;">',
//url //url
'<div class="ke-dialog-row">', '<div class="ke-dialog-row">',
'<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>', '<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>',
'<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" /> &nbsp;', '<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" /> &nbsp;',
'<span class="ke-button-common ke-button-outer">', '<span class="ke-button-common ke-button-outer">',
'<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />', '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
'</span>', '</span>',
'</div>', '</div>',
//size //size
'<div class="ke-dialog-row">', '<div class="ke-dialog-row">',
'<label for="remoteWidth" style="width:60px;">' + lang.size + '</label>', '<label for="remoteWidth" style="width:60px;">' + lang.size + '</label>',
lang.width + ' <input type="text" id="remoteWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ', lang.width + ' <input type="text" id="remoteWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',
lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ', lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',
'<img class="ke-refresh-btn" src="' + imgPath + 'refresh.png" width="16" height="16" alt="" style="cursor:pointer;" title="' + lang.resetSize + '" />', '<img class="ke-refresh-btn" src="' + imgPath + 'refresh.png" width="16" height="16" alt="" style="cursor:pointer;" title="' + lang.resetSize + '" />',
'</div>', '</div>',
//align //align
'<div class="ke-dialog-row">', '<div class="ke-dialog-row">',
'<label style="width:60px;">' + lang.align + '</label>', '<label style="width:60px;">' + lang.align + '</label>',
'<input type="radio" name="align" class="ke-inline-block" value="" checked="checked" /> <img name="defaultImg" src="' + imgPath + 'align_top.gif" width="23" height="25" alt="" />', '<input type="radio" name="align" class="ke-inline-block" value="" checked="checked" /> <img name="defaultImg" src="' + imgPath + 'align_top.gif" width="23" height="25" alt="" />',
' <input type="radio" name="align" class="ke-inline-block" value="left" /> <img name="leftImg" src="' + imgPath + 'align_left.gif" width="23" height="25" alt="" />', ' <input type="radio" name="align" class="ke-inline-block" value="left" /> <img name="leftImg" src="' + imgPath + 'align_left.gif" width="23" height="25" alt="" />',
' <input type="radio" name="align" class="ke-inline-block" value="right" /> <img name="rightImg" src="' + imgPath + 'align_right.gif" width="23" height="25" alt="" />', ' <input type="radio" name="align" class="ke-inline-block" value="right" /> <img name="rightImg" src="' + imgPath + 'align_right.gif" width="23" height="25" alt="" />',
'</div>', '</div>',
//title //title
'<div class="ke-dialog-row">', '<div class="ke-dialog-row">',
'<label for="remoteTitle" style="width:60px;">' + lang.imgTitle + '</label>', '<label for="remoteTitle" style="width:60px;">' + lang.imgTitle + '</label>',
'<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="width:200px;" />', '<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="width:200px;" />',
'</div>', '</div>',
'</div>', '</div>',
//remote image - end //remote image - end
//local upload - start //local upload - start
'<div class="tab2" style="display:none;">', '<div class="tab2" style="display:none;">',
'<iframe name="' + target + '" style="display:none;"></iframe>', '<iframe name="' + target + '" style="display:none;"></iframe>',
'<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + K.addParam(uploadJson, 'dir=image') + '">', '<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + K.addParam(uploadJson, 'dir=image') + '">',
//file //file
'<div class="ke-dialog-row">', '<div class="ke-dialog-row">',
hiddenElements.join(''), hiddenElements.join(''),
'<label style="width:60px;">' + lang.localUrl + '</label>', '<label style="width:60px;">' + lang.localUrl + '</label>',
'<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" /> &nbsp;', '<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" /> &nbsp;',
'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />', '<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',
'</div>', '</div>',
'</form>', '</form>',
'</div>', '</div>',
//local upload - end //local upload - end
'</div>' '</div>'
].join(''); ].join('');
var dialogWidth = showLocal || allowFileManager ? 450 : 400, var dialogWidth = showLocal || allowFileManager ? 450 : 400,
dialogHeight = showLocal && showRemote ? 300 : 250; dialogHeight = showLocal && showRemote ? 300 : 250;
var dialog = self.createDialog({ var dialog = self.createDialog({
name : name, name: name,
width : dialogWidth, width: dialogWidth,
height : dialogHeight, height: dialogHeight,
title : self.lang(name), title: self.lang(name),
body : html, body: html,
yesBtn : { yesBtn: {
name : self.lang('yes'), name: self.lang('yes'),
click : function(e) { click: function (e) {
// Bugfix: http://code.google.com/p/kindeditor/issues/detail?id=319 // Bugfix: http://code.google.com/p/kindeditor/issues/detail?id=319
if (dialog.isLoading) { if (dialog.isLoading) {
return; return;
} }
// insert local image // insert local image
if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) { if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) {
if (uploadbutton.fileBox.val() == '') { if (uploadbutton.fileBox.val() == '') {
alert(self.lang('pleaseSelectFile')); alert(self.lang('pleaseSelectFile'));
return; return;
} }
dialog.showLoading(self.lang('uploadLoading')); dialog.showLoading(self.lang('uploadLoading'));
uploadbutton.submit(); uploadbutton.submit();
localUrlBox.val(''); localUrlBox.val('');
return; return;
} }
// insert remote image // insert remote image
var url = K.trim(urlBox.val()), var url = K.trim(urlBox.val()),
width = widthBox.val(), width = widthBox.val(),
height = heightBox.val(), height = heightBox.val(),
title = titleBox.val(), title = titleBox.val(),
align = ''; align = '';
alignBox.each(function() { alignBox.each(function () {
if (this.checked) { if (this.checked) {
align = this.value; align = this.value;
return false; return false;
} }
}); });
if (url == 'http://' || K.invalidUrl(url)) { if (url == 'http://' || K.invalidUrl(url)) {
alert(self.lang('invalidUrl')); alert(self.lang('invalidUrl'));
urlBox[0].focus(); urlBox[0].focus();
return; return;
} }
if (!/^\d*$/.test(width)) { if (!/^\d*$/.test(width)) {
alert(self.lang('invalidWidth')); alert(self.lang('invalidWidth'));
widthBox[0].focus(); widthBox[0].focus();
return; return;
} }
if (!/^\d*$/.test(height)) { if (!/^\d*$/.test(height)) {
alert(self.lang('invalidHeight')); alert(self.lang('invalidHeight'));
heightBox[0].focus(); heightBox[0].focus();
return; return;
} }
clickFn.call(self, url, title, width, height, 0, align); clickFn.call(self, url, title, width, height, 0, align);
} }
}, },
beforeRemove : function() { beforeRemove: function () {
viewServerBtn.unbind(); viewServerBtn.unbind();
widthBox.unbind(); widthBox.unbind();
heightBox.unbind(); heightBox.unbind();
refreshBtn.unbind(); refreshBtn.unbind();
} }
}), }),
div = dialog.div; div = dialog.div;
var urlBox = K('[name="url"]', div), var urlBox = K('[name="url"]', div),
localUrlBox = K('[name="localUrl"]', div), localUrlBox = K('[name="localUrl"]', div),
viewServerBtn = K('[name="viewServer"]', div), viewServerBtn = K('[name="viewServer"]', div),
widthBox = K('.tab1 [name="width"]', div), widthBox = K('.tab1 [name="width"]', div),
heightBox = K('.tab1 [name="height"]', div), heightBox = K('.tab1 [name="height"]', div),
refreshBtn = K('.ke-refresh-btn', div), refreshBtn = K('.ke-refresh-btn', div),
titleBox = K('.tab1 [name="title"]', div), titleBox = K('.tab1 [name="title"]', div),
alignBox = K('.tab1 [name="align"]', div); alignBox = K('.tab1 [name="align"]', div);
var tabs; var tabs;
if (showRemote && showLocal) { if (showRemote && showLocal) {
tabs = K.tabs({ tabs = K.tabs({
src : K('.tabs', div), src: K('.tabs', div),
afterSelect : function(i) {} afterSelect: function (i) {}
}); });
tabs.add({ tabs.add({
title : lang.remoteImage, title: lang.remoteImage,
panel : K('.tab1', div) panel: K('.tab1', div)
}); });
// tabs.add({ tabs.add({
// title : lang.localImage, title: lang.localImage,
// panel : K('.tab2', div) panel: K('.tab2', div)
// }); });
tabs.select(tabIndex); tabs.select(tabIndex);
} else if (showRemote) { } else if (showRemote) {
K('.tab1', div).show(); K('.tab1', div).show();
} else if (showLocal) { } else if (showLocal) {
K('.tab2', div).show(); K('.tab2', div).show();
} }
var uploadbutton = K.uploadbutton({ var uploadbutton = K.uploadbutton({
button : K('.ke-upload-button', div)[0], button: K('.ke-upload-button', div)[0],
fieldName : filePostName, fieldName: filePostName,
url : K.addParam(uploadJson, 'dir=image'), form: K('.ke-form', div),
form : K('.ke-form', div), target: target,
target : target, width: 60,
width: 60, afterUpload: function (data) {
afterUpload : function(data) { dialog.hideLoading();
dialog.hideLoading(); if (data.error === 0) {
if (data.error === 0) { var url = data.url;
var url = data.url; if (formatUploadUrl) {
if (formatUploadUrl) { url = K.formatUrl(url, 'absolute');
url = K.formatUrl(url, 'absolute'); }
} if (self.afterUpload) {
if (self.afterUpload) { self.afterUpload.call(self, url, data, name);
self.afterUpload.call(self, url, data, name); }
} if (!fillDescAfterUploadImage) {
if (!fillDescAfterUploadImage) { clickFn.call(self, url, data.title, data.width, data.height, data.border, data.align);
clickFn.call(self, url, data.title, data.width, data.height, data.border, data.align); } else {
} else { K(".ke-dialog-row #remoteUrl", div).val(url);
K(".ke-dialog-row #remoteUrl", div).val(url); K(".ke-tabs-li", div)[0].click();
K(".ke-tabs-li", div)[0].click(); K(".ke-refresh-btn", div).click();
K(".ke-refresh-btn", div).click(); }
} } else {
} else { alert(data.message);
alert(data.message); }
} },
}, afterError: function (html) {
afterError : function(html) { dialog.hideLoading();
dialog.hideLoading(); self.errorDialog(html);
self.errorDialog(html); }
} });
}); uploadbutton.fileBox.change(function (e) {
uploadbutton.fileBox.change(function(e) { localUrlBox.val(uploadbutton.fileBox.val());
localUrlBox.val(uploadbutton.fileBox.val()); });
}); if (allowFileManager) {
if (allowFileManager) { viewServerBtn.click(function (e) {
viewServerBtn.click(function(e) { self.loadPlugin('filemanager', function () {
self.loadPlugin('filemanager', function() { self.plugin.filemanagerDialog({
self.plugin.filemanagerDialog({ viewType: 'VIEW',
viewType : 'VIEW', dirName: 'image',
dirName : 'image', clickFn: function (url, title) {
clickFn : function(url, title) { if (self.dialogs.length > 1) {
if (self.dialogs.length > 1) { K('[name="url"]', div).val(url);
K('[name="url"]', div).val(url); if (self.afterSelectFile) {
if (self.afterSelectFile) { self.afterSelectFile.call(self, url);
self.afterSelectFile.call(self, url); }
} self.hideDialog();
self.hideDialog(); }
} }
} });
}); });
}); });
}); } else {
} else { viewServerBtn.hide();
viewServerBtn.hide(); }
} var originalWidth = 0, originalHeight = 0;
var originalWidth = 0, originalHeight = 0; function setSize(width, height) {
function setSize(width, height) { widthBox.val(width);
widthBox.val(width); heightBox.val(height);
heightBox.val(height); originalWidth = width;
originalWidth = width; originalHeight = height;
originalHeight = height; }
} refreshBtn.click(function (e) {
refreshBtn.click(function(e) { var tempImg = K('<img src="' + urlBox.val() + '" />', document).css({
var tempImg = K('<img src="' + urlBox.val() + '" />', document).css({ position: 'absolute',
position : 'absolute', visibility: 'hidden',
visibility : 'hidden', top: 0,
top : 0, left: '-1000px'
left : '-1000px' });
}); tempImg.bind('load', function () {
tempImg.bind('load', function() { setSize(tempImg.width(), tempImg.height());
setSize(tempImg.width(), tempImg.height()); tempImg.remove();
tempImg.remove(); });
}); K(document.body).append(tempImg);
K(document.body).append(tempImg); });
}); widthBox.change(function (e) {
widthBox.change(function(e) { if (originalWidth > 0) {
if (originalWidth > 0) { heightBox.val(Math.round(originalHeight / originalWidth * parseInt(this.value, 10)));
heightBox.val(Math.round(originalHeight / originalWidth * parseInt(this.value, 10))); }
} });
}); heightBox.change(function (e) {
heightBox.change(function(e) { if (originalHeight > 0) {
if (originalHeight > 0) { widthBox.val(Math.round(originalWidth / originalHeight * parseInt(this.value, 10)));
widthBox.val(Math.round(originalWidth / originalHeight * parseInt(this.value, 10))); }
} });
}); urlBox.val(options.imageUrl);
urlBox.val(options.imageUrl); setSize(options.imageWidth, options.imageHeight);
setSize(options.imageWidth, options.imageHeight); titleBox.val(options.imageTitle);
titleBox.val(options.imageTitle); alignBox.each(function () {
alignBox.each(function() { if (this.value === options.imageAlign) {
if (this.value === options.imageAlign) { this.checked = true;
this.checked = true; return false;
return false; }
} });
}); if (showRemote && tabIndex === 0) {
if (tabIndex === 0) { urlBox[0].focus();
urlBox[0].focus(); urlBox[0].select();
urlBox[0].select(); }
} return dialog;
return dialog; };
}; self.plugin.image = {
self.plugin.image = { edit: function () {
edit : function() { var img = self.plugin.getSelectedImage();
var img = self.plugin.getSelectedImage(); self.plugin.imageDialog({
self.plugin.imageDialog({ imageUrl: img ? img.attr('data-ke-src') : 'http://',
imageUrl : img ? img.attr('data-ke-src') : 'http://', imageWidth: img ? img.width() : '',
imageWidth : img ? img.width() : '', imageHeight: img ? img.height() : '',
imageHeight : img ? img.height() : '', imageTitle: img ? img.attr('title') : '',
imageTitle : img ? img.attr('title') : '', imageAlign: img ? img.attr('align') : '',
imageAlign : img ? img.attr('align') : '', showRemote: allowImageRemote,
showRemote : true, showLocal: allowImageUpload,
showLocal : allowImageUpload, tabIndex: img ? 0 : imageTabIndex,
tabIndex: img ? 0 : imageTabIndex, clickFn: function (url, title, width, height, border, align) {
clickFn : function(url, title, width, height, border, align) { if (img) {
self.exec('insertimage', url, title, width, height, border, align); img.attr('src', url);
// Bugfix: [Firefox] 上传图片后，总是出现正在加载的样式，需要延迟执行hideDialog img.attr('data-ke-src', url);
setTimeout(function() { img.attr('width', width);
self.hideDialog().focus(); img.attr('height', height);
}, 0); img.attr('title', title);
} img.attr('align', align);
}); img.attr('alt', title);
}, } else {
'delete' : function() { self.exec('insertimage', url, title, width, height, border, align);
var target = self.plugin.getSelectedImage(); }
if (target.parent().name == 'a') { // Bugfix: [Firefox] 上传图片后，总是出现正在加载的样式，需要延迟执行hideDialog
target = target.parent(); setTimeout(function () {
} self.hideDialog().focus();
target.remove(); }, 0);
} }
}; });
self.clickToolbar(name, self.plugin.image.edit); },
}); 'delete': function () {
var target = self.plugin.getSelectedImage();
if (target.parent().name == 'a') {
target = target.parent();
}
target.remove();
// [IE] 删除图片后立即点击图片按钮出错
self.addBookmark();
}
};
self.clickToolbar(name, self.plugin.image.edit);
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment