开发笔记四

 

 

 

ueditor的一些坑

（1）添加表情：表情本地化

①官网下载表情包，解压后放到相应目录下；

②修改ueditor.config.js，将emotionLocalization改为true并去掉注释；

③在使用时，定制toolbar时加上"emotion"即可。

var asmContent = UE.getEditor('content', {
        wordCount:false,
        wordCountMsg:false,
        toolbars:[[
            'anchor', 'undo', ... 'emotion']]
    });

（2）关于有下拉菜单的，点击出不来

原因是我之前改一个bug，就是粘贴的时候出现一个白色方框

当时将这个框设成不显示了，所有导致下拉也不显示了。这里先去掉，然后再用另一种方法改这个框的问题。

去掉之后就显示下拉菜单了，但是下拉菜单里，会发现点击无效，审查元素，发现是有个遮罩给挡住了，而这个遮罩的z-index是写死的important，对应的样式是

所有解决办法就是把这个important去掉，这是之前改的一个bug造成的。看这z-index的值，肯定开发这个的人的生气就是1989年10月14日了。当时的bug现象是我点击弹出了一个layer弹层，而此时页面进行了遮罩，但是下边有个富文本框没有遮罩住。原因就是layui里弹层的z-index和ueditor的z-index相同了，所有我手动改了富文本框的z-index。当时为了保险加上了important，这里去掉就行了。

（3）有序无序的序号编辑完成后不显示

在编辑器里的时候是可以显示的，但是保存了之后再显示到页面上就没有了。

原因分析：

①经过审查对比编辑器里和页面生成后的区域，发现两者是一模一样的，因而排除掉节点保存异常渲染异常的可能；

②审查样式，发现这里的原理是屏蔽掉html的li自带的序号，而使用自定义的图片来作为序号显示，详情如下：

li.list-cn-3-1 {

　　background-image: url(http://localhost:8080/starmooc/starcm/plugins/ueditor/themes/ueditor-list/list-cn-3-1.gif);

}

对于有序，我们直接把这些css从有编辑器的页面复制过去就行了；对于无序，这样并不行，因为上边这个none，而解决办法是，将这个样式覆盖掉，可以js里覆盖，也可以直接改css

:not(.list-paddingleft-2)>li {
    list-style: none
}

意为，父元素不是.list-paddingleft-2的才这样设置；

 

（4）锚点添加后不显示

原本我以为这个跟3一样是样式问题，然后审查元素发现果然没有样式；但是，这只是其中之一，还有另外一个原因影响，表现就是加上样式之后依然不显示。

原因2：审查元素发现，保存之前，锚点是一个img，而保存了之后，就变成一个a了，且没有了class：anchorclass；尝试直接给这个a添加该class，发现可以实现，因为这个也是同3一样，使用的图片；

那么问题就来了，总不能把所有的a都替换了吧？肯定会对其他地方有影响。当然如果业务场景不太复杂，控制的好一些也是可以的。

锚点的原理：首先，显示到编辑器里的时候，会对其进行渲染，将a替换为img并加上class；其次， 在保存的时候，又会反过来，把img给转换成a并去掉class，所有不管怎么保存最后都没有锚点显示。

解决办法：手动改了这段代码，不让他转换。改法很多种，可以直接去掉，可以改条件，可以改执行命令。

UE.plugin.register('anchor', function (){

    return {
        bindEvents:{
            'ready':function(){
                utils.cssRule('anchor',
                    '.anchorclass{background: url(\''
                        + this.options.themePath
                        + this.options.theme +'/images/anchor.gif\') no-repeat scroll left center transparent;cursor: auto;display: inline-block;height: 16px;width: 15px;}',
                    this.document);
            }
        },
       /*outputRule: function(root){
           utils.each(root.getNodesByTagName('img'),function(a){
               var val;
               if(val = a.getAttr('anchorname')){
                   a.tagName = 'a';
                   a.setAttr({
                       anchorname : '',
                       name : val,
                       'class' : ''
                   })
               }
           })
       },*/
       inputRule:function(root){
           utils.each(root.getNodesByTagName('a'),function(a){
               var val;
               if((val = a.getAttr('name')) && !a.getAttr('href')){
                   a.tagName = 'img';
                   a.setAttr({
                       anchorname :a.getAttr('name'),
                       'class' : 'anchorclass'
                   });
                   a.setAttr('name')

               }
           })

       },
......

以上就是ueditor.all.js中的一段源码，就是锚点的渲染和保存的关键代码。我们可以看到，页面生成就是插入片段，渲染就是加载img，保存就把img转换成了a。说实在的这段代码挺坑的，不知道开发者当时的心里是怎么想的要达到什么样的目的，或者不这样会有什么不好的影响。

 

（5）从word等文档中复制的表格，粘贴到富文本框保存后，没有边框

调试发现原因同上，也是由于css没有加载，添加以下样式即可

/* 表格边框--start */
.selectTdClass{background-color:#edf5fa !important}
table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}
table{margin-bottom:10px;border-collapse:collapse;display:table;}
td,th{padding: 5px 10px;border: 1px solid #DDD;}
caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}
th{border-top:1px solid #BBB;background-color:#F7F7F7;}
table tr.firstRow th{border-top-width:2px;}
.ue-table-interlace-color-single{ background-color: #fcfcfc; } 
.ue-table-interlace-color-double{ background-color: #f7faff; }
td p{margin:0;padding:0;}
/* 表格边框--end */

我们可以看到有很多类似的，也是只在使用的时候动态添加的样式，避免再出现其他问题，我们可以一并复制或者直接放到layui.css中。个人还是比较好奇为什么编辑器不直接写到layui.css中

 

（6）表情中BoBo一栏无法使用

使用BoBo一栏的表情时，会报404找不到。调试发现请求的文件是

而查看本地表情图片，发现文件名是小写的。修改方法有两个，一个是把这些表情文件的b改成B，另一个就是在请求时改成b。

调试源码发现，emotion.js中请求的拼接是52行前后：

function InsertSmiley( url, evt ) {
    var obj = {
        src:editor.options.emotionLocalization ? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url : url
    };
    obj._src = obj.src;
    editor.execCommand( 'insertimage', obj );
    if ( !evt.ctrlKey ) {
        dialog.popup.hide();
    }
}

顺着找，发现是在emotion.html中定义的数组：

<script type="text/javascript">
    var emotion = {
        tabNum:7, //切换面板数量
        SmilmgName:{ tab0:['j_00', 84], tab1:['t_00', 40], tab2:['w_00', 52], tab3:['B_00', 63], tab4:['C_00', 20], tab5:['i_f', 50], tab6:['y_00', 40] }, //图片前缀名
        imageFolders:{ tab0:'jx2/', tab1:'tsj/', tab2:'ldw/', tab3:'bobo/', tab4:'babycat/', tab5:'face/', tab6:'youa/'}, //图片对应文件夹路径
        imageCss:{tab0:'jd', tab1:'tsj', tab2:'ldw', tab3:'bb', tab4:'cat', tab5:'pp', tab6:'youa'}, //图片css类名
        imageCssOffset:{tab0:35, tab1:35, tab2:35, tab3:35, tab4:35, tab5:25, tab6:35}, //图片偏移
        SmileyInfor:{
            tab0:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '打酱油', '俯卧撑', '气愤', '?', '吻', '怒', '胜利', 'HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '微笑', '亲吻', '调皮', '惊恐', '耍酷', '发火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '晕倒', '开心', '偷笑', '大哭', '滴汗', '叹气', '超赞', '??', '飞吻', '天使', '撒花', '生气', '被砸', '吓傻', '随意吐'],
            tab1:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '摊手', '睡觉', '瘫坐', '无聊', '星星闪', '旋转', '也不行', '郁闷', '正Music', '抓墙', '撞墙至死', '歪头', '戳眼', '飘过', '互相拍砖', '砍死你', '扔桌子', '少林寺', '什么？', '转头', '我爱牛奶', '我踢', '摇晃', '晕厥', '在笼子里', '震荡'],
            tab2:['大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '我错了', 'money', '气愤', '挑逗', '吻', '怒', '胜利', '委屈', '受伤', '说啥呢？', '闭嘴', '不', '逗你玩儿', '飞吻', '眩晕', '魔法', '我来了', '睡了', '我打', '闭嘴', '打', '打晕了', '刷牙', '爆揍', '炸弹', '倒立', '刮胡子', '邪恶的笑', '不要不要', '爱恋中', '放大仔细看', '偷窥', '超高兴', '晕', '松口气', '我跑', '享受', '修养', '哭', '汗', '啊~', '热烈欢迎', '打酱油', '俯卧撑', '?'],
            tab3:['HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '泪眼', '流泪', '生气', '吐舌', '喜欢', '旋转', '再见', '抓狂', '汗', '鄙视', '拜', '吐血', '嘘', '打人', '蹦跳', '变脸', '扯肉', '吃To', '吃花', '吹泡泡糖', '大变身', '飞天舞', '回眸', '可怜', '猛抽', '泡泡', '苹果', '亲', '', '骚舞', '烧香', '睡', '套娃娃', '捅捅', '舞倒', '西红柿', '爱慕', '摇', '摇摆', '杂耍', '招财', '被殴', '被球闷', '大惊', '理想', '欧打', '呕吐', '碎', '吐痰'],
            tab4:['发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '顶', '幸运', '爱心', '躲', '送花', '选择'],
            tab5:['微笑', '亲吻', '调皮', '惊讶', '耍酷', '发火', '害羞', '汗水', '大哭', '得意', '鄙视', '困', '夸奖', '晕倒', '疑问', '媒婆', '狂吐', '青蛙', '发愁', '亲吻', '', '爱心', '心碎', '玫瑰', '礼物', '哭', '奸笑', '可爱', '得意', '呲牙', '暴汗', '楚楚可怜', '困', '哭', '生气', '惊讶', '口水', '彩虹', '夜空', '太阳', '钱钱', '灯泡', '咖啡', '蛋糕', '音乐', '爱', '胜利', '赞', '鄙视', 'OK'],
            tab6:['男兜', '女兜', '开心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '无奈', '滴汗', '叹气', '狂晕', '委屈', '超赞', '??', '疑问', '飞吻', '天使', '撒花', '生气', '被砸', '口水', '泪奔', '吓傻', '吐舌头', '点头', '随意吐', '旋转', '困困', '鄙视', '狂顶', '篮球', '再见', '欢迎光临', '恭喜发财', '稍等', '我在线', '恕不议价', '库房有货', '货在路上']
        }
    };
</script>

将tab3的B_00改成b_00即可。

不得不说，这么简单的问题，这么多年竟然也不改。

 

还有两个比较有意思的地方，一个是用自己的生日做z-index的，

这一点layui也是

还有就是，ueditor.config.js的404行的这个注释

 

 这位开发的心里是有多抱怨？