kindEditor4.1版修改上传图片宽高(图片自适应)

KindEditor 4.1上传图片宽高设置

需求：需要将图片设置为自适应，让该图片在任何尺寸的页面中都能正常显示不拉伸，也就是平时使用的给宽度设置百分比，因此需要修改源码。

在网上看了很多文档，有人说要遍历得到的编辑器的内容，找到标签，获取该图片的原始宽高，然后进行修改，我个人表示没有看懂，不清楚怎么实现的。还有人说要修改kindEditor.js中第3168行附近，在下面代码：

var html = '

图片中图片相关的源码都封装在plugins/image/image.js中，该文件中主要包括了上传图片的界面，和后台处理，其他不多说，说一下图片上传之后路过的代码部分

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);

}

setTimeout(function() {

self.hideDialog().focus();

}, 0);

}

});

},

上面这段代码，在执行时，第一次上传的图片，获取不到宽和高，也就是

clickFn : function(url, title, width, height, border, align) {

这一行中width和height都是空值，图片上传后，右键点击图片属性，设置图片宽高，之后可以把宽和高加到HTML代码中，if (img)为图片获取到宽和高的时候，进入，获取不到的时候进入else。

下面先说修改获取到宽高时：

由于上面的原因，只能在设置图片属性的时候，才能获取到图片的宽高，图片自适应不需要设置高，只要获取宽的百分比即可，所以在这里将上面代码中

img.attr('height', height);

注释掉，并将宽设置为相对页面的宽百分比，加入如下代码

var winWidth = K(document.body).width();

var widthNew = "";

if(width!=""){

widthNew =(width/winWidth*100*2).toString().split(".")[0]+"%";

}

widthNew为获取到的宽的百分比，将

img.attr('width', width);

替换为

img.attr('width', widthNew);

当图片宽高未获取到的时候，在else中调用的'insertimage'方法中，该方法在kindEditor.js中，第3168行附近，代码如下：

insertimage : function(url, title, width, height, border, align) { title = _undef(title, '');

border = _undef(border, 0);

var html = '

if (width) {

html += 'width="' + _escape(width) + '" ';

}

if (height) {

html += 'height="' + _escape(height) + '" ';

}

if (title) {

html += 'title="' + _escape(title) + '" ';

}

if (align) {

html += 'align="' + _escape(align) + '" ';

}

html += 'alt="' + _escape(title) + '" ';

html += '/>';

returnthis.inserthtml(html);

},