阿汤博客-承接Linux服务器维护、服务器配置与管理,有意者可以联系博主!

WordPress中百度编辑器UEditor代码高亮中的行号与代码内容不能对齐解决办法

运维问题 88℃ 0评论

前端时间把WordPress使用UEditor编辑器以后,代码高亮以后不能换行的问题解决了。具体解决办法可以参考阿汤博客的分享《WordPress中百度编辑器ueditor前台代码语言无法自动换行解决办法

虽然换行问题解决了,但是行号和代码没有对齐,当时没注意,后面越看越觉得奇怪,手机访问效果图如下:

UEditor代码高亮中的行号与代码内容没对齐

电脑端访问效果图如下:

UEditor代码高亮中的行号与代码内容没对齐

可以发现电脑端访问的时候,行号“1”和第一行代码是没有对齐的,手机端虽然没有这个问题,但是行号和实际的行是不对应的,看着非常奇怪。

百度和谷歌找了差不多大半天的解决方案,没一个文档是完全可以解决这个问题的。

网上的方案总结为两种:

1、修改shCoreDefault.css的对齐样式,修改样式syntaxhighlighter的padding-top的值,让代码对齐。

2、通过jQuery遍历修改CSS样式,达到自动对齐的目的。

方案一测试了没效果;方案二测试了也没效果。

搞了几个小时以后,都有一种换编辑器的想法了。

但最后令人欣慰的是,功夫不负有心人,终于让自己给琢磨好了。

下面分享下我的解决方法:

我在测试了各种方案都不成功以后,想着把行号取消算了,这样看着就不会觉得突兀,但是找了半天,也没找到解决办法,就想着把行号隐藏了,于是去改行号的样式gutter,让我发现没对齐的原因是因为样式中的padding: 9.5px 0 9.5px 9.5px!important 导致,上内边距9.5px。

.gutter{
  color:#afafaf!important;
  background-color:#f7f7f9!important;
  border-right:1px solid #e1e1e8!important;
  padding:9.5px 0 9.5px 9.5px!important;
  border-top-left-radius:4px!important;
  border-bottom-left-radius:4px!important;
  user-select:none!important;
  -moz-user-select:none!important;
  -webkit-user-select:none!important
}

于是我马上改成padding: 0 0 9.5px 9.5px!important ,然后清理缓存测试,发现对齐了。如下图:

UEditor代码高亮中的首行已经对齐

为什么手机端一开始首行就没有错位,主要就是因为样式gutter中的padding: 9.5px 0 9.5px 9.5px!important 参数对代码列<td>也生效了,电脑端为什么没有对代码列<td>生效,应该是因为WordPress模板样式中冲突导致。

到此以为问题得到了解决,但是去访问手机端,发现行号和实际的行号还是不对应。

然后去找了篇代码比较多的文章访问http://www.amd5.cn/atang_4575.html,发现电脑端虽然第一行没有错位了,但还是行号和代码的实际行号不对应。如下图:

UEditor代码高亮中的行号与代码内容没对齐

此时我突然发现我在之前的测试过程中发现犯了一个致命错误,才导致花了差不多大半天时间都没解决此问题。

这个致命的错误就是:我在测试方案二的时候,把jQuery代码添加到的文件是电脑端模板,刚好那测试的那篇文章http://www.amd5.cn/atang_3727.html没有多行代码换行的情况,所以电脑端看不出效果;而我在通过手机访问测试的时候忽略了WordPress手机端是插件实现的,插件也有自己的模板,所以当时看着没效果,就判断方案二不可行。

发现了错误,于是马上找到插件对应的模板目录/wp-content/plugins/wptouch/themes/bauhaus/default/,然后把之前找到的jQuery代码添加到single.php,然后进行测试。

欣喜的发现终于正常了:

UEditor代码高亮中的行号与代码内容已经对齐

电脑端访问效果:

UEditor代码高亮中的行号与代码内容已经对齐

网上相关的jQuery代码有三种,经过我测试,如下两种都生效:

jQuery代码一:

<script type="text/javascript">
//解决百度编辑器UEditor行号错位问题
$(function(){
    SyntaxHighlighter.highlight();
    $("table.syntaxhighlighter").each(function () {
        if (!$(this).hasClass("nogutter")) {
            var $gutter = $($(this).find(".gutter")[0]);
            var $codeLines = $($(this).find(".code .line"));
            $gutter.find(".line").each(function (i) {
                $(this).height($($codeLines[i]).height());
                $($codeLines[i]).height($($codeLines[i]).height());
            });
        }
    });
});
</script>

因为代码量少阿汤博客也是采用此代码。

jQuery代码二:

<script type="text/javascript">
//解决百度编辑器UEditor行号错位问题
$(function() {
    // Line wrap back
    var shLineWrap = function() {
        $('.syntaxhighlighter').each(function() {
            // Fetch
            var $sh = $(this),
            $gutter = $sh.find('td.gutter'),
            $code = $sh.find('td.code');
            // Cycle through lines
            $gutter.children('.line').each(function(i) {
                // Fetch
                var $gutterLine = $(this),
                $codeLine = $code.find('.line:nth-child(' + (i + 1) + ')');
                //alert($gutterLine);
                // Fetch height
                var height = $codeLine.height() || 0;
                if (!height) {
                    height = 'auto';
                } else {
                    height = height += 'px';
                    //alert(height);
                }
                // Copy height over
                $gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0
                console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
            });
        });
    };
    // Line wrap back when syntax highlighter has done it's stuff
    var shLineWrapWhenReady = function() {
        if ($('.syntaxhighlighter').length === 0) {
            setTimeout(shLineWrapWhenReady, 10);
        } else {
            shLineWrap();
        }
    }; // Fire
    shLineWrapWhenReady();
});
</script>

我把代码一添加到手机模板以后,访问会报错Uncaught TypeError: $ is not a function 。我网上查了原因是大概是因为与其他库冲突了。

解决方法是把$(function()改成jQuery(function ($)就可以防止冲突了,改完以后如下:

<script type="text/javascript">
//解决百度编辑器UEditor行号错位问题
jQuery(function ($){
    SyntaxHighlighter.highlight();
    $("table.syntaxhighlighter").each(function () {
        if (!$(this).hasClass("nogutter")) {
            var $gutter = $($(this).find(".gutter")[0]);
            var $codeLines = $($(this).find(".code .line"));
            $gutter.find(".line").each(function (i) {
                $(this).height($($codeLines[i]).height());
                $($codeLines[i]).height($($codeLines[i]).height());
            });
        }
    });
});
</script>

我在处理的过程中发现UEditor代码使用的默认行间距是1.1em,这个间距是比较小的,看着比较紧凑,于是我也改了下间距,主要是修改wp-content/plugins/ueditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css文件。

找到文件里面的line-height: 1.1em!important;改成line-height: 2em!important; 就可以了,到此看着就顺眼多了。

转载请注明:阿汤博客 » WordPress中百度编辑器UEditor代码高亮中的行号与代码内容不能对齐解决办法

喜欢 (0)or分享 (0)