kindEditor富文本编辑器 设置图片最大宽度为100%
程序员文章站
2024-02-22 15:59:40
...
最近一个小程序项目 web端kindDditor富文本编辑器上传的图片在小程序端显示不正常。 只能修改编辑器源码,加上style="max-width:100%"
方法如下:
打开/kindeditor/kindeditor-all.js文件
在大约3244行左右
将 HTML加上 “style="max-width:100%"” (单单加这一句没用 后来应该被正则替换掉了 或者是重新设置了 style)
后来发现 只要修改
if (width) {
html += 'width="' + _escape(width) + '" ';
}
为
html += 'max-width:100%';
即可(其实这一句并没有起修改style的作用 仅仅是为了不让正则替换 前边的“style="max-width:100%"” )
这里width是获取用户设置的width
加上这一句 前边的“style="max-width:100%"”也不会被替换掉 设置图片最大宽度为100%完成
整个修改如下
insertimage : function(url, title, width, height, border, align) {//---------------------------------------------------------------------------------------
title = _undef(title, '');
border = _undef(border, 0);
var html = '<img style="max-width:100%" src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';///////////////////////////////////////////////////////////////////////////////
html += 'max-width:100%';
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);
},