前端时间把WordPress使用UEditor编辑器以后,代码高亮以后不能换行的问题解决了。具体解决办法可以参考阿汤博客的分享《WordPress中百度编辑器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 ,然后清理缓存测试,发现对齐了。如下图:
为什么手机端一开始首行就没有错位,主要就是因为样式gutter中的padding: 9.5px 0 9.5px 9.5px!important 参数对代码列<td>也生效了,电脑端为什么没有对代码列<td>生效,应该是因为WordPress模板样式中冲突导致。
到此以为问题得到了解决,但是去访问手机端,发现行号和实际的行号还是不对应。
然后去找了篇代码比较多的文章访问http://www.amd5.cn/atang_4575.html,发现电脑端虽然第一行没有错位了,但还是行号和代码的实际行号不对应。如下图:
此时我突然发现我在之前的测试过程中发现犯了一个致命错误,才导致花了差不多大半天时间都没解决此问题。
这个致命的错误就是:我在测试方案二的时候,把jQuery代码添加到的文件是电脑端模板,刚好那测试的那篇文章http://www.amd5.cn/atang_3727.html没有多行代码换行的情况,所以电脑端看不出效果;而我在通过手机访问测试的时候忽略了WordPress手机端是插件实现的,插件也有自己的模板,所以当时看着没效果,就判断方案二不可行。
发现了错误,于是马上找到插件对应的模板目录/wp-content/plugins/wptouch/themes/bauhaus/default/,然后把之前找到的jQuery代码添加到single.php,然后进行测试。
欣喜的发现终于正常了:
电脑端访问效果:
网上相关的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; 就可以了,到此看着就顺眼多了。