版权声明:转载请注明来源 

本文链接:http://www.ptbird.cn/2016/07/03/wanmeijiejuekindeditor/


kindeditor是非常方便简单使用的富文本编辑器,也很符合国人的习惯,尤其是表情等应用,但是kindedtor在手机上的显示也是一个比较头疼的问题,百度了很多资料,发现并没有什么实质性的回答,后来研究了一下kindeditor.js,直接从源代码入手,解决在手机上显示的问题,尤其是解决图片上传弹出框的问题。

1. 解决手机显示,编辑器撑破div导致响应式失效的问题。如下图:

QQ截图20160703130206  

解决方案:

 

<script>
editor = K.create('textarea[name="content"]', {
        themeType : 'simple',
        resizeType: 1,
        height : "200px", 
        width:"100%",   //将宽度设置为div宽度的100%即可
        filterMode : false, 
        dialogAlignType:"page",
        items: [
            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
            'insertunorderedlist', '|', 'emoticons', 'image', 'link'
        ]
        });
        </script>

修改后的效果:

QQ截图20160703132036

2 . 解决图片上传过程中弹出框宽度问题。如下图:

QQ截图20160703132134

解决方案:

/*
*   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;" 本身是不存在的,需要添加,搜索相关代码就能搜索到,然后添加样式,作用是,使得按钮居中显示!
*
*/




效果图: 

QQ截图20160703132332 

2、设置dialog的宽度和高度 




 var dialogWidth = showLocal || allowFileManager ? 300 : 300;
 var dialogHeight = showLocal && showRemote ? 300 : 300;
/*
*
*   上面也是  kindeditor中的代码,可以直接搜dialogWidth就能搜到,本来数值不是 300:300 分别是 450:400 && 300:250   
    *   首先首先第一个数是窗口的宽度或者高度,而第二个数内容的宽度或者高度,因此设置成一样的就行,300是在iphone5S的根据设置的(应该是最小的屏幕的手机了目前),显示没有问题
*
*/


效果图


QQ截图20160703135330


QQ截图20160703135417




至此,kindeditor在手机上显示没有任何问题,并且能够正常使用; 
手机上另一个问题是:编辑器的自动高度问题,这个问题网上很多解释的,就不在重复。




关于功能上的使用问题,如果发现更好地解决办法,会再次更新博客





By postbird | There I am,in the world more exciting!

www.ptbird.cn