KindEditor使用技巧

  • Post author:
  • Post category:其他



  • 动态设置KindEditor

    上传图片的样式

    (大小)

在afterCreate方法里动态添加style

如:

K.create('#editor_id',{
	afterCreate : function(){
		var style =  '<style type="text/css">'
			    +'.ke-content img{width:auto;height:auto;max-width:96%;max-height:96%;}'
			    +'</style>';
		$(".ke-edit-iframe").contents().find(".ke-content").before(style);
	}
});

重点在于找到 Iframe 里的元素对象,即:


.contents().find(“.ke-content”)


  • 修复


    Chrome浏览器上传单张图片bug(上传成功提示上传失败)

kindeditor.js、kindeditor-all.js

4192行代码修改为

if (pre) {
	str = pre.innerHTML;
} 
else {
	/* 移除Chrome浏览器多出的div标签 */
	divObject = doc.body.getElementsByTagName("div"); //获取多出来的div标签
	for(var i=0; i<divObject.length; i++){
		var ele = divObject[i];
		ele.parentNode.removeChild(ele); //移除多出来的标签
	}
	str = doc.body.innerHTML;
}

  • 修复上传的图片宽度溢出

1.传图片后手动设置style属性:在 insertimage 中手动添加style属性,修改如下:

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) + '" ';
	//加入style属性,设置最大宽度为100%
    html += ' style="max-width:100%;" data-ke-style="max-width:100%;" ';
	...
},

2.用editor.html()获取代码时设置不删除style属性:在 _formatHtml 方法的864行左右,修改如下:

_each(styleMap, function(k, v) {
	if (htmlTags && !htmlTagMap[tagName].style && !htmlTagMap[tagName]['.' + k]) {
		//不删除,保留style属性
		// delete styleMap[k];
	}
});



版权声明:本文为jiongxian1原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。