百度编辑器 UEditor 配置语法高亮以及修复换行问题-纸盒

最近在写博客的时候，使用的编辑器就是传说中的编辑神器——UEditor。在使用过程中，还是多多少少遇到一些问题，这篇文章来总结一下语法高亮方面的配置以及遇到的一些问题。1.配置语法高亮在编辑器中，默认的就有“语法高亮”的功能，编辑保存后，默认的是使用<pre>标签包含的一段代码。在前端网页展示时，就需要引入相关的第三方插件，并调用其方法进行着色。具体代

最近在写博客的时候，使用的编辑器就是传说中的编辑神器——UEditor。

在使用过程中，还是多多少少遇到一些问题，这篇文章来总结一下语法高亮方面的配置以及遇到的一些问题。

1.配置语法高亮

在编辑器中，默认的就有“语法高亮”的功能，编辑保存后，默认的是使用<pre>标签包含的一段代码。

在前端网页展示时，就需要引入相关的第三方插件，并调用其方法进行着色。

具体代码如下，在<head>插入相应的样式和脚本，然后页面加载完成后调用方法进行着色（这里用到JQuery）：

<link href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="ueditor/third-party/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        SyntaxHighlighter.highlight();
    });
</script>

2.修复不会自动换行问题

如果你的内容展示区域不够宽的话，那么代码如果超过显示区域的宽度后，仍然会继续延伸。

上网搜索了一下，发现是语法高亮的插件的样式没有强制换行倒置的。

打开“shCoreDefault.css”文件，找到下面这段，并加载强制换行的属性即可。

具体代码如下：

.syntaxhighlighter
{
    width: 100% !important;
    margin: .3em 0 .3em 0 !important;
    position: relative !important;
    overflow: auto !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    border-collapse: separate !important;
    word-break:break-all; /* dier add this */
}

3.修复行号错位问题

当修复了自动换行的问题后，另一个问题也随之而来。

因为一行代码显示成两行了，而左侧的行号并未因为而做出改变。这样就会造成高度不统一而错位了。

又上网搜索了一下，发现已经有人写了脚本处理相应的问题了。

具体代码如下：

<script type="text/javascript">
    $(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>

4.修复改变浏览器窗口大小时又不行了

然而又有问题了，对应强迫症的我怎么受得了呢？

具体代码如下：

<script type="text/javascript">
    $(window).resize(function(){
        $("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>

至此，终于搞定了语法高亮插件的问题。

OK，写出来希望各位遇到问题的童鞋不要碰壁太久。