在下面代码中 查找 setsize 参数即可
将 height 属性默认添加改为自定义是否添加，勾选设置图高单选框才添加
image.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ueditor图片对话框</title>
<script type="text/javascript" src="../internal.js"></script>
<!-- jquery -->
<script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>
<!-- webuploader -->
<script src="../../third-party/webuploader/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">
<!-- image dialog -->
<link rel="stylesheet" href="image.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="tabhead" class="tabhead">
<span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>
<span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
<!--<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
<span class="tab" data-content-id="search"><var id="lang_tab_search"></var></span>-->
</div>
<div class="alignBar">
<label class="algnLabel"><var id="lang_input_align"></var></label>
<span id="alignIcon">
<span id="noneAlign" class="none-align focus" data-align="none"></span>
<span id="leftAlign" class="left-align" data-align="left"></span>
<span id="rightAlign" class="right-align" data-align="right"></span>
<span id="centerAlign" class="center-align" data-align="center"></span>
</span>
<input id="align" name="align" type="hidden" value="none"/>
</div>
<div id="tabbody" class="tabbody">
<!-- 远程图片 -->
<div id="remote" class="panel">
<div class="top">
<div class="row">
<label for="url"><var id="lang_input_url"></var></label>
<span><input class="text" id="url" disabled="disabled" type="text"/></span>
</div>
</div>
<div class="left">
<div class="row">
<label><var id="lang_input_size"></var></label>
<span><var id="lang_input_width"> </var><input class="text" type="text" id="width"/>px </span>
<span><var id="lang_input_height"> </var><input class="text" type="text" id="height"/>px </span>
<span><input id="lock" type="checkbox" checked="checked" ><span id="lockicon"></span></span>
</div>
<div class="row">
<label><var id="lang_input_border"></var></label>
<span><input class="text" type="text" id="border"/>px </span>
</div>
<div class="row">
<label><var id="lang_input_vhspace"></var></label>
<span><input class="text" type="text" id="vhSpace"/>px </span>
</div>
<div class="row">
<label><var id="lang_input_title"></var></label>
<span><input class="text" type="text" id="title"/></span>
</div>
<div class="row">
<label><var id="lang_show_caption"></var></label>
<span><input type="checkbox" id="showCaption" checked="checked" value="1"/></span>
</div>
<div class="row">
<label><var id="lang_show_setsize">设置图高</var></label>
<span><input type="checkbox" id="setsize" value="0"/></span>
</div>
<span><input type="text" style="display:none" id="height_judge" value="" /></span>
</div>
<div class="right"><div class="text" id="preview"></div></div>
</div>
<!-- 上传图片 -->
<div id="upload" class="panel focus">
<div id="queueList" class="queueList">
<div class="statusBar element-invisible">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePickerBtn"></div>
<div class="uploadBtn"><var id="lang_start_upload"></var></div>
</div>
</div>
<div id="dndArea" class="placeholder">
<div class="filePickerContainer">
<div id="filePickerReady"></div>
</div>
</div>
<ul class="filelist element-invisible">
<li id="filePickerBlock" class="filePickerBlock"></li>
</ul>
</div>
</div>
<!-- 在线图片 -->
<div id="online" class="panel">
<div id="imageList"><var id="lang_imgLoading"></var></div>
</div>
<!-- 搜索图片 -->
<div id="search" class="panel">
<div class="searchBar">
<input id="searchTxt" class="searchTxt text" type="text" />
<select id="searchType" class="searchType">
<option value="&s=4&z=0"></option>
<option value="&s=1&z=19"></option>
<option value="&s=2&z=0"></option>
<option value="&s=3&z=0"></option>
</select>
<input id="searchReset" type="button" />
<input id="searchBtn" type="button" />
</div>
<div id="searchList" class="searchList"><ul id="searchListUl"></ul></div>
</div>
</div>
</div>
<script type="text/javascript" src="image.js"></script>
<script>
$(window).load(function(){
var judge = document.getElementById("height_judge").value;
var setsize = document.getElementById("setsize");
if(judge) {
setsize.setAttribute("checked","checked");
setsize.value="1";
}
});
</script>
</body>
</html>
ueditor.all.js
UE.commands['insertimage'] = {
execCommand:function (cmd, opt) {
opt = utils.isArray(opt) ? opt : [opt];
if (!opt.length) {
return;
}
var me = this,
range = me.selection.getRange(),
img = range.getClosedNode();
if(me.fireEvent('beforeinsertimage', opt) === true){
return;
}
if (img && /img/i.test(img.tagName) && (img.className != "edui-faked-video" || img.className.indexOf("edui-upload-video")!=-1) && !img.getAttribute("word_img")) {
var first = opt.shift();
var floatStyle = first['floatStyle'];
var showCaption = first['showCaption'];
var setsize = first['setsize'];
if (setsize == 1) {
var height = first['height'];
var height1 = first['style.height'];
}
delete first['floatStyle'];
img.style.border = (first.border||0) +"px solid #000";
//// img.style.margin = (first.margin||0) +"px";
// img.style.cssText += ';margin:' + (first.margin||0) +"px;" + 'border:' + (first.border||0) +"px solid #000";
delete first['showCaption'];
delete first['setsize'];
domUtils.setAttributes(img, first);
common = range.getCommonAncestor();
//console.log(common);
var childs = domUtils.getElementsByTagName(common,'span');
if (childs.length > 0) {
console.log(childs[0]);
domUtils.remove(childs[0]);
}
if(setsize == 0) {
var childsimg = domUtils.getElementsByTagName(common,'img');
if (childsimg[0]['height'] > 0) {
domUtils.removeAttributes( childsimg[0], 'height' );
}
if (childsimg[0]['style']['height']) {
domUtils.removeStyle(childsimg[0],'height');
}
}
if (showCaption == 1) {
var tempTitle = range.document.createElement('span');
domUtils.setAttributes(tempTitle, {'class':'m-pic-article'});
tempTitle.innerHTML = first.title;
range.setCursor('toEnd');
range.insertNode(tempTitle);
}
me.execCommand('imagefloat', floatStyle);
if (opt.length > 0) {
range.setStartAfter(img).setCursor(false, true);
me.execCommand('insertimage', opt);
}
} else {
var html = [], str = '', ci;
ci = opt[0];
if (opt.length == 1) {
str = '<img src="' + ci.src + '" ' + (ci._src ? ' _src="' + ci._src + '" ' : '') +
(ci.width ? 'width="' + ci.width + '" ' : '') +
(ci.height ? ' height="' + ci.height + '" ' : '') +
(ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? ' style="float:' + ci['floatStyle'] + ';"' : '') +
(ci.title && ci.title != "" ? ' title="' + ci.title + '"' : '') +
(ci.border && ci.border != "0" ? ' border="' + ci.border + '"' : '') +
(ci.alt && ci.alt != "" ? ' alt="' + ci.alt + '"' : '') +
(ci.hspace && ci.hspace != "0" ? ' hspace = "' + ci.hspace + '"' : '') +
(ci.vspace && ci.vspace != "0" ? ' vspace = "' + ci.vspace + '"' : '') + '/>';
if (ci['floatStyle'] == 'center') {
str = '<p style="text-align: center">' + str + '</p>';
}
html.push(str);
} else {
for (var i = 0; ci = opt[i++];) {
str = '<p ' + (ci['floatStyle'] == 'center' ? 'style="text-align: center" ' : '') + '><img src="' + ci.src + '" ' +
(ci.width ? 'width="' + ci.width + '" ' : '') + (ci._src ? ' _src="' + ci._src + '" ' : '') +
(ci.height ? ' height="' + ci.height + '" ' : '') +
' style="' + (ci['floatStyle'] && ci['floatStyle'] != 'center' ? 'float:' + ci['floatStyle'] + ';' : '') +
(ci.border || '') + '" ' +
(ci.title ? ' title="' + ci.title + '"' : '') + ' /></p>';
html.push(str);
}
}
me.execCommand('insertHtml', html.join(''));
}
me.fireEvent('afterinsertimage', opt)
}
};image.js
/* 初始化onok事件 */
function initButtons() {
dialog.onok = function () {
var remote = false, list = [], id, tabs = $G('tabhead').children;
for (var i = 0; i < tabs.length; i++) {
if (domUtils.hasClass(tabs[i], 'focus')) {
id = tabs[i].getAttribute('data-content-id');
break;
}
}
switch (id) {
case 'remote':
list = remoteImage.getInsertList();
break;
case 'upload':
list = uploadImage.getInsertList();
var count = uploadImage.getQueueCount();
if (count) {
$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
return false;
}
break;
case 'online':
list = onlineImage.getInsertList();
break;
case 'search':
list = searchImage.getInsertList();
remote = true;
break;
}
if(list) {
editor.execCommand('insertimage', list);
remote && editor.fireEvent("catchRemoteImage");
}
};
}
/* 初始化对其方式的点击事件 */
function initAlign(){
/* 点击align图标 */
domUtils.on($G("alignIcon"), 'click', function(e){
var target = e.target || e.srcElement;
if(target.className && target.className.indexOf('-align') != -1) {
setAlign(target.getAttribute('data-align'));
}
});
}
/* 设置对齐方式 */
function setAlign(align){
align = align || 'none';
var aligns = $G("alignIcon").children;
for(i = 0; i < aligns.length; i++){
if(aligns[i].getAttribute('data-align') == align) {
domUtils.addClass(aligns[i], 'focus');
$G("align").value = aligns[i].getAttribute('data-align');
} else {
domUtils.removeClasses(aligns[i], 'focus');
}
}
}
/* 获取对齐方式 */
function getAlign(){
var align = $G("align").value || 'none';
return align == 'none' ? '':align;
}
/* 在线图片 */
function RemoteImage(target) {
this.container = utils.isString(target) ? document.getElementById(target) : target;
this.init();
}
RemoteImage.prototype = {
init: function () {
this.initContainer();
this.initEvents();
},
initContainer: function () {
this.dom = {
'url': $G('url'),
'width': $G('width'),
'height': $G('height'),
'border': $G('border'),
'vhSpace': $G('vhSpace'),
'title': $G('title'),
'align': $G('align'),
'showCaption': $G('showCaption'),
'setsize' : $G('setsize')
};
var img = editor.selection.getRange().getClosedNode();
if (img) {
this.setImage(img);
}
},
initEvents: function () {
var _this = this,
locker = $G('lock');
showCaption = $G('showCaption');
setsize = $G('setsize');
//console.log($G('showCaption'));
/* 改变url */
domUtils.on($G("url"), 'keyup', updatePreview);
domUtils.on($G("border"), 'keyup', updatePreview);
domUtils.on($G("title"), 'keyup', updatePreview);
domUtils.on($G("width"), 'keyup', function(){
updatePreview();
if(locker.checked) {
var proportion =locker.getAttribute('data-proportion');
$G('height').value = Math.round(this.value / proportion);
} else {
_this.updateLocker();
}
});
domUtils.on($G("height"), 'keyup', function(){
updatePreview();
if(locker.checked) {
var proportion =locker.getAttribute('data-proportion');
$G('width').value = Math.round(this.value * proportion);
} else {
_this.updateLocker();
}
});
domUtils.on($G("lock"), 'change', function(){
var proportion = parseInt($G("width").value) /parseInt($G("height").value);
locker.setAttribute('data-proportion', proportion);
});
domUtils.on($G('showCaption'), 'change', function(){
if (showCaption.checked) {
$G('showCaption').value = 1;
} else {
$G('showCaption').value = 0;
}
});
domUtils.on($G('setsize'), 'change', function(){
if ($G('setsize').checked) {
$G('setsize').value = 1;
} else {
$G('setsize').value = 0;
}
});
function updatePreview(){
_this.setPreview();
}
},
updateLocker: function(){
var width = $G('width').value,
height = $G('height').value,
locker = $G('lock');
if(width && height && width == parseInt(width) && height == parseInt(height)) {
locker.disabled = false;
locker.title = '';
} else {
locker.checked = false;
locker.disabled = 'disabled';
locker.title = lang.remoteLockError;
}
},
setImage: function(img){
/* 不是正常的图片 */
if (!img.tagName || img.tagName.toLowerCase() != 'img' && !img.getAttribute("src") || !img.src) return;
var wordImgFlag = img.getAttribute("word_img"),
src = wordImgFlag ? wordImgFlag.replace("&", "&") : (img.getAttribute('_src') || img.getAttribute("src", 2).replace("&", "&")),
align = editor.queryCommandValue("imageFloat");
/* 防止onchange事件循环调用 */
if (src !== $G("url").value) $G("url").value = src;
if(src) {
/* 设置表单内容 */
$G("width").value = img.width || '';
$G("height").value = img.height || '';
$G("border").value = img.getAttribute("border") || '0';
$G("vhSpace").value = img.getAttribute("vspace") || '0';
$G("title").value = img.title || img.alt || '';
if(img.getAttribute('height')) {
$G("height_judge").value = img.getAttribute('height');
}
setAlign(align);
this.setPreview();
this.updateLocker();
}
},
getData: function(){
var data = {};
for(var k in this.dom){
data[k] = this.dom[k].value;
}
return data;
},
setPreview: function(){
var url = $G('url').value,
ow = $G('width').value,
oh = $G('height').value,
border = $G('border').value,
title = $G('title').value,
preview = $G('preview'),
width,
height;
//setsize;
width = ((!ow || !oh) ? preview.offsetWidth:Math.min(ow, preview.offsetWidth));
width = width+(border*2) > preview.offsetWidth ? width:(preview.offsetWidth - (border*2));
height = (!ow || !oh) ? '':width*oh/ow;
if(url) {
preview.innerHTML = '<img src="' + url + '" width="' + width + '" height="' + height + '" border="' + border + 'px solid #000" title="' + title + '" />';
}
},
getInsertList: function () {
var data = this.getData();
//console.log(data);
if(data['url']) {
return [{
src: data['url'],
_src: data['url'],
width: data['width'] || '',
height: data['height'] || '',
border: data['border'] || '',
floatStyle: data['align'] || '',
vspace: data['vhSpace'] || '',
title: data['title'] || '',
alt: data['title'] || '',
showCaption: data['showCaption'] || '',
setsize: data['setsize'] || '',
//控制图片style
style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
}];
} else {
return [];
}
}
}