转载

wangeditor手机适配方案

分享一个本人修改的wangeditor手机上 编辑栏的折行适应

还是先给出官网,http://www.wangeditor.com/

官网里呢对于引用的说明说的很明白,配置项和使用方法也很详细。

重点说一下手机上适配的问题, 官网说:

注意:v3 版本的菜单不支持换行折叠了(因为换行之后菜单栏是在太难看),如果菜单栏宽度不够,建议精简菜单项。

怎么自己实现呢。我是这么做的,pc的效果图:

手机效果图:

给出图标浮动代码

if(screen.width <= 768){
$(".w-e-toolbar").css("height","58px");
$(".w-e-menu:eq(8)").css({"float":"left","position":"absolute","margin-top":"26px"});
$(".w-e-menu:eq(9)").css({"float":"left","position":"absolute","margin-top":"26px","margin-left":"36px"});
$(".w-e-menu:eq(10)").css({"float":"left","position":"absolute","margin-top":"26px","margin-left":"72px"});
$(".w-e-menu:eq(11)").css({"float":"left","position":"absolute","margin-top":"26px","margin-left":"108px"});
$(".w-e-menu:eq(12)").css({"float":"left","position":"absolute","margin-top":"26px","margin-left":"144px"});
$(".w-e-menu:eq(13)").css({"float":"left","position":"absolute","margin-top":"26px","margin-left":"180px"});
$(".w-e-menu:eq(14)").css({"float":"left","position":"absolute","margin-top":"26px","margin-left":"216px"});
}

除此之外呢,三锤发现,“插入代码”的弹出框过大,显示不下,在手机上超出屏幕宽度很多
没关系三锤替看官找到了源码位置:(我引的是wangeditor.js)

var panel = new Panel(this, {
            width: 347,***这里之前是500现在改成你想要的宽度就好了***
            // 一个 Panel 包含多个 tab
            tabs: [{
                // 标题
                title: '插入代码',
                // 模板
                tpl: '<div>\n                        <textarea id="' + textId + '" style="height:145px;;">' + value + '</textarea>\n                        <div class="w-e-button-container">\n                            <button id="' + btnId + '" class="right">\u63D2\u5165</button>\n                        </div>\n                    <div>',
                // 事件绑定
                events: [
正文到此结束
本文目录