ueditor 上傳圖片去掉高度屬性方法
阿新 • • 發佈：2019-01-31
在下面程式碼中 查詢 setsize 引數即可
將 height 屬性預設新增改為自定義是否新增，勾選設定圖高單選框才新增
image.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ueditor圖片對話方塊</title>
<script type="text/javascript" src="../internal.js"></script>
<!-- jquery --> 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 [];
}
}
}