完美解决KindEditor手机弹出框显示问题
kindeditor是非常方便简单使用的富文本编辑器,也很符合国人的习惯,尤其是表情等应用,但是kindedtor在手机上的显示也是一个比较头疼的问题,百度了很多资料,发现并没有什么实质性的回答,后来研究了一下kindeditor.js,直接从源代码入手,解决在手机上显示的问题,尤其是解决图片上传弹出框的问题。
**
1. 解决手机显示,编辑器撑破div导致响应式失效的问题。如下图:
**
解决方案:
<script>
editor = K.create('textarea[name="content"]', {
themeType : 'simple',
resizeType: 1,
height : "200px",
width:"100%",
filterMode : false,
dialogAlignType:"page",
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'
]
});
</script>
**
修改后的效果:
**
2 . 解决图片上传过程中弹出框宽度问题。如下图:
解决方案:
1、居中显示按钮
/*
* kindeditor.js
*
*/
var bodyDiv = K('<div class="ke-dialog-body"></div>');
contentDiv.append(bodyDiv);
bodyDiv.append(body);
var footerDiv = K('<div class="ke-dialog-footer" style="text-align:center;"></div>');
if (previewBtn || yesBtn || noBtn) {
contentDiv.append(footerDiv);
}
/*
* 注意 上面代码中style="text-align:center;" 本身是不存在的,需要添加,搜索相关代码就能搜索到,然后添加样式,作用是,使得按钮居中显示!
*
*/
效果图
2、设置dialog的宽度和高度
var dialogWidth = showLocal || allowFileManager ? 300 : 300;
var dialogHeight = showLocal && showRemote ? 300 : 300;
效果图
至此,kindeditor在手机上显示没有任何问题,并且能够正常使用;
手机上另一个问题是:编辑器的自动高度问题,这个问题网上很多解释的,就不在重复。
关于功能上的使用问题,如果发现更好地解决办法,会再次更新博客
By postbird | There I am,in the world more exciting!
www.ptbird.cn
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)