需求：需要将图片设置为自适应，让该图片在任何尺寸的页面中都能正常显示不拉伸，也就是平时使用的给宽度设置百分比，因此需要修改源码。
在网上看了很多文档，有人说要遍历得到的编辑器的内容，到<img>标签，获取该图片的原始宽高，然后进行修改，我个人表示没有看懂，不清楚怎么实现的。还有人说要修改kindEditor.js中第3168行附近，在下面代码：
var html = '<img src="'+_escape(url)+'" data-ke-src="' + _escape(url) + '" ';
中添加width="'+width+'" height="'+height+'"，我也试了一下，不可用，经过半天时间的研究，基本上实现了图片自适应的效果，下面来分析一下kindEditor中图片部分的源码。
图片中图片相关的源码都封装在plugins/image/image.js中，该文件中主要包括了上传图片的界面，和后台处理，其他不多说，说一下图片上传之后路过的代码部分
self.plugin.imageDialog({
imageUrl : img ? img.attr('data-ke-src') : '',
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);
2021公务员国考职位表 } else {
('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 = '<img src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';
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 += '/>';
return this.inserthtml(html);
},
此时需要在调用该方法的时候将取好的宽百分比传递过来，因此将image.js中的调用方法
('insertimage', url, title, width, height, border, align);
修改为：
('insertimage', url, title, widthNew, height, border, align);
widthNew为上面获取到的宽的百分比。
在kindEditor.js中
var html = '<img src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';
修改为：
var html = '<img width="'+width+'" src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';
北京公务员2021职位表
此时传递过来的width值为宽的百分比，由于生成的HTML代码会自动设置style，在style中还会设置width和height，所以将下面两行要注释掉
/*if (width) {
html += 'width="' + _escape(width) + '" ';
}
if (height) {
html += 'height="' + _escape(height) + '" ';
}*/
上面大致描述了一下过程，操作时，不能直接粘贴图片，要以上传的方式，并且要重新设置图片大小，就能实现图片自适应了，如果有代码导出后图片不到的问题，请百度搜索修改图片路径，如文档有问题，可以反馈给我，必定虚心受教
发布评论