373 lines
13 KiB
JavaScript
373 lines
13 KiB
JavaScript
/*******************************************************************************
|
||
* KindEditor - WYSIWYG HTML Editor for Internet
|
||
* Copyright (C) 2006-2011 kindsoft.net
|
||
*
|
||
* @author Roddy <luolonghao@gmail.com>
|
||
* @site http://www.kindsoft.net/
|
||
* @licence http://www.kindsoft.net/license.php
|
||
*******************************************************************************/
|
||
|
||
KindEditor.plugin('image', function(K) {
|
||
var self = this, name = 'image',
|
||
allowImageUpload = K.undef(self.allowImageUpload, true),
|
||
allowImageRemote = K.undef(self.allowImageRemote, true),
|
||
formatUploadUrl = K.undef(self.formatUploadUrl, true),
|
||
allowFileManager = K.undef(self.allowFileManager, false),
|
||
uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),
|
||
imageTabIndex = K.undef(self.imageTabIndex, 0),
|
||
imgPath = self.pluginsPath + 'image/images/',
|
||
extraParams = K.undef(self.extraFileUploadParams, {}),
|
||
filePostName = K.undef(self.filePostName, 'imgFile'),
|
||
fillDescAfterUploadImage = K.undef(self.fillDescAfterUploadImage, false),
|
||
lang = self.lang(name + '.');
|
||
|
||
self.plugin.imageDialog = function(options) {
|
||
var imageUrl = options.imageUrl,
|
||
imageWidth = K.undef(options.imageWidth, ''),
|
||
imageHeight = K.undef(options.imageHeight, ''),
|
||
imageTitle = K.undef(options.imageTitle, ''),
|
||
imageAlign = K.undef(options.imageAlign, ''),
|
||
showRemote = K.undef(options.showRemote, true),
|
||
showLocal = K.undef(options.showLocal, true),
|
||
tabIndex = K.undef(options.tabIndex, 0),
|
||
clickFn = options.clickFn;
|
||
var target = 'kindeditor_upload_iframe_' + new Date().getTime();
|
||
var hiddenElements = [];
|
||
for(var k in extraParams){
|
||
hiddenElements.push('<input type="hidden" name="' + k + '" value="' + extraParams[k] + '" />');
|
||
}
|
||
var html = [
|
||
'<div style="padding:20px;">',
|
||
//tabs
|
||
'<div class="tabs"></div>',
|
||
//remote image - start
|
||
'<div class="tab1" style="display:none;">',
|
||
//url
|
||
'<div class="ke-dialog-row">',
|
||
'<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>',
|
||
'<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" /> ',
|
||
'<span class="ke-button-common ke-button-outer">',
|
||
'<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
|
||
'</span>',
|
||
'</div>',
|
||
//size
|
||
'<div class="ke-dialog-row">',
|
||
'<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.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 + '" />',
|
||
'</div>',
|
||
//align
|
||
'<div class="ke-dialog-row">',
|
||
'<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="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="" />',
|
||
'</div>',
|
||
//title
|
||
'<div class="ke-dialog-row">',
|
||
'<label for="remoteTitle" style="width:60px;">' + lang.imgTitle + '</label>',
|
||
'<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="width:200px;" />',
|
||
'</div>',
|
||
'</div>',
|
||
//remote image - end
|
||
//local upload - start
|
||
'<div class="tab2" style="display:none;">',
|
||
'<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') + '">',
|
||
//file
|
||
'<div class="ke-dialog-row">',
|
||
hiddenElements.join(''),
|
||
'<label style="width:60px;">' + lang.localUrl + '</label>',
|
||
'<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" /> ',
|
||
'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',
|
||
'</div>',
|
||
'</form>',
|
||
'</div>',
|
||
//local upload - end
|
||
'</div>'
|
||
].join('');
|
||
var dialogWidth = showLocal || allowFileManager ? 450 : 400,
|
||
dialogHeight = showLocal && showRemote ? 300 : 250;
|
||
var dialog = self.createDialog({
|
||
name : name,
|
||
width : dialogWidth,
|
||
height : dialogHeight,
|
||
title : self.lang(name),
|
||
body : html,
|
||
yesBtn : {
|
||
name : self.lang('yes'),
|
||
click : function(e) {
|
||
// Bugfix: http://code.google.com/p/kindeditor/issues/detail?id=319
|
||
if (dialog.isLoading) {
|
||
return;
|
||
}
|
||
// insert local image
|
||
if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) {
|
||
if (uploadbutton.fileBox.val() == '') {
|
||
alert(self.lang('pleaseSelectFile'));
|
||
return;
|
||
}
|
||
dialog.showLoading(self.lang('uploadLoading'));
|
||
uploadbutton.submit();
|
||
localUrlBox.val('');
|
||
return;
|
||
}
|
||
// insert remote image
|
||
var url = K.trim(urlBox.val()),
|
||
width = widthBox.val(),
|
||
height = heightBox.val(),
|
||
title = titleBox.val(),
|
||
align = '';
|
||
alignBox.each(function() {
|
||
if (this.checked) {
|
||
align = this.value;
|
||
return false;
|
||
}
|
||
});
|
||
if (url == 'http://' || K.invalidUrl(url)) {
|
||
alert(self.lang('invalidUrl'));
|
||
urlBox[0].focus();
|
||
return;
|
||
}
|
||
if (!/^\d*$/.test(width)) {
|
||
alert(self.lang('invalidWidth'));
|
||
widthBox[0].focus();
|
||
return;
|
||
}
|
||
if (!/^\d*$/.test(height)) {
|
||
alert(self.lang('invalidHeight'));
|
||
heightBox[0].focus();
|
||
return;
|
||
}
|
||
clickFn.call(self, url, title, width, height, 0, align);
|
||
}
|
||
},
|
||
beforeRemove : function() {
|
||
viewServerBtn.unbind();
|
||
widthBox.unbind();
|
||
heightBox.unbind();
|
||
refreshBtn.unbind();
|
||
}
|
||
}),
|
||
div = dialog.div;
|
||
|
||
var urlBox = K('[name="url"]', div),
|
||
localUrlBox = K('[name="localUrl"]', div),
|
||
viewServerBtn = K('[name="viewServer"]', div),
|
||
widthBox = K('.tab1 [name="width"]', div),
|
||
heightBox = K('.tab1 [name="height"]', div),
|
||
refreshBtn = K('.ke-refresh-btn', div),
|
||
titleBox = K('.tab1 [name="title"]', div),
|
||
alignBox = K('.tab1 [name="align"]', div);
|
||
|
||
var tabs;
|
||
if (showRemote && showLocal) {
|
||
tabs = K.tabs({
|
||
src : K('.tabs', div),
|
||
afterSelect : function(i) {}
|
||
});
|
||
tabs.add({
|
||
title : lang.remoteImage,
|
||
panel : K('.tab1', div)
|
||
});
|
||
tabs.add({
|
||
title : lang.localImage,
|
||
panel : K('.tab2', div)
|
||
});
|
||
tabs.select(tabIndex);
|
||
} else if (showRemote) {
|
||
K('.tab1', div).show();
|
||
} else if (showLocal) {
|
||
K('.tab2', div).show();
|
||
}
|
||
|
||
var uploadbutton = K.uploadbutton({
|
||
button : K('.ke-upload-button', div)[0],
|
||
fieldName : filePostName,
|
||
form : K('.ke-form', div),
|
||
target : target,
|
||
width: 60,
|
||
afterUpload : function(data) {
|
||
dialog.hideLoading();
|
||
if (data.error === 0) {
|
||
var url = data.url;
|
||
if (formatUploadUrl) {
|
||
url = K.formatUrl(url, 'absolute');
|
||
}
|
||
if (self.afterUpload) {
|
||
self.afterUpload.call(self, url, data, name);
|
||
}
|
||
if (!fillDescAfterUploadImage) {
|
||
clickFn.call(self, url, data.title, data.width, data.height, data.border, data.align);
|
||
} else {
|
||
K(".ke-dialog-row #remoteUrl", div).val(url);
|
||
K(".ke-tabs-li", div)[0].click();
|
||
K(".ke-refresh-btn", div).click();
|
||
}
|
||
} else {
|
||
alert(data.message);
|
||
}
|
||
},
|
||
afterError : function(html) {
|
||
dialog.hideLoading();
|
||
self.errorDialog(html);
|
||
}
|
||
});
|
||
uploadbutton.fileBox.change(function(e) {
|
||
//localUrlBox.val(uploadbutton.fileBox.val());
|
||
if (dialog.isLoading) {
|
||
return;
|
||
}
|
||
// insert local image
|
||
if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) {
|
||
if (uploadbutton.fileBox.val() == '') {
|
||
alert(self.lang('pleaseSelectFile'));
|
||
return;
|
||
}
|
||
dialog.showLoading(self.lang('uploadLoading'));
|
||
uploadbutton.submit();
|
||
localUrlBox.val('');
|
||
return;
|
||
}
|
||
// insert remote image
|
||
var url = K.trim(urlBox.val()),
|
||
width = widthBox.val(),
|
||
height = heightBox.val(),
|
||
title = titleBox.val(),
|
||
align = '';
|
||
alignBox.each(function() {
|
||
if (this.checked) {
|
||
align = this.value;
|
||
return false;
|
||
}
|
||
});
|
||
if (url == 'http://' || K.invalidUrl(url)) {
|
||
alert(self.lang('invalidUrl'));
|
||
urlBox[0].focus();
|
||
return;
|
||
}
|
||
if (!/^\d*$/.test(width)) {
|
||
alert(self.lang('invalidWidth'));
|
||
widthBox[0].focus();
|
||
return;
|
||
}
|
||
if (!/^\d*$/.test(height)) {
|
||
alert(self.lang('invalidHeight'));
|
||
heightBox[0].focus();
|
||
return;
|
||
}
|
||
clickFn.call(self, url, title, width, height, 0, align);
|
||
|
||
|
||
});
|
||
if (allowFileManager) {
|
||
viewServerBtn.click(function(e) {
|
||
self.loadPlugin('filemanager', function() {
|
||
self.plugin.filemanagerDialog({
|
||
viewType : 'VIEW',
|
||
dirName : 'image',
|
||
clickFn : function(url, title) {
|
||
if (self.dialogs.length > 1) {
|
||
K('[name="url"]', div).val(url);
|
||
if (self.afterSelectFile) {
|
||
self.afterSelectFile.call(self, url);
|
||
}
|
||
self.hideDialog();
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
} else {
|
||
viewServerBtn.hide();
|
||
}
|
||
var originalWidth = 0, originalHeight = 0;
|
||
function setSize(width, height) {
|
||
widthBox.val(width);
|
||
heightBox.val(height);
|
||
originalWidth = width;
|
||
originalHeight = height;
|
||
}
|
||
refreshBtn.click(function(e) {
|
||
var tempImg = K('<img src="' + urlBox.val() + '" />', document).css({
|
||
position : 'absolute',
|
||
visibility : 'hidden',
|
||
top : 0,
|
||
left : '-1000px'
|
||
});
|
||
tempImg.bind('load', function() {
|
||
setSize(tempImg.width(), tempImg.height());
|
||
tempImg.remove();
|
||
});
|
||
K(document.body).append(tempImg);
|
||
});
|
||
widthBox.change(function(e) {
|
||
if (originalWidth > 0) {
|
||
heightBox.val(Math.round(originalHeight / originalWidth * parseInt(this.value, 10)));
|
||
}
|
||
});
|
||
heightBox.change(function(e) {
|
||
if (originalHeight > 0) {
|
||
widthBox.val(Math.round(originalWidth / originalHeight * parseInt(this.value, 10)));
|
||
}
|
||
});
|
||
urlBox.val(options.imageUrl);
|
||
setSize(options.imageWidth, options.imageHeight);
|
||
titleBox.val(options.imageTitle);
|
||
alignBox.each(function() {
|
||
if (this.value === options.imageAlign) {
|
||
this.checked = true;
|
||
return false;
|
||
}
|
||
});
|
||
if (showRemote && tabIndex === 0) {
|
||
urlBox[0].focus();
|
||
urlBox[0].select();
|
||
}
|
||
return dialog;
|
||
};
|
||
self.plugin.image = {
|
||
edit : function() {
|
||
var img = self.plugin.getSelectedImage();
|
||
self.plugin.imageDialog({
|
||
imageUrl : img ? img.attr('data-ke-src') : 'http://',
|
||
imageWidth : img ? img.width() : '',
|
||
imageHeight : img ? img.height() : '',
|
||
imageTitle : img ? img.attr('title') : '',
|
||
imageAlign : img ? img.attr('align') : '',
|
||
showRemote : allowImageRemote,
|
||
showLocal : allowImageUpload,
|
||
tabIndex: img ? 0 : imageTabIndex,
|
||
clickFn : function(url, title, width, height, border, align) {
|
||
if (img) {
|
||
img.attr('src', url);
|
||
img.attr('data-ke-src', url);
|
||
img.attr('width', width);
|
||
img.attr('height', height);
|
||
img.attr('title', title);
|
||
img.attr('align', align);
|
||
img.attr('alt', title);
|
||
} else {
|
||
self.exec('insertimage', url, title, width, height, border, align);
|
||
}
|
||
// Bugfix: [Firefox] 上传图片后，总是出现正在加载的样式，需要延迟执行hideDialog
|
||
setTimeout(function() {
|
||
self.hideDialog().focus();
|
||
}, 0);
|
||
}
|
||
});
|
||
},
|
||
'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);
|
||
});
|