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

4月
14日

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

WEB编程 dier 2014-04-14 20:09 13213 0
最近在写博客的时候，使用的编辑器就是传说中的编辑神器——UEditor。
在使用过程中，还是多多少少遇到一些问题，这篇文章来总结一下语法高亮方面的配置以及遇到的一些问题。

1.配置语法高亮
在编辑器中，默认的就有“语法高亮”的功能，编辑保存后，默认的是使用<pre>标签包含的一段代码。
在前端网页展示时，就需要引入相关的第三方插件，并调用其方法进行着色。
具体代码如下，在<head>插入相应的样式和脚本，然后页面加载完成后调用方法进行着色（这里用到JQuery）：
```
<link href="/Contents/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="/Contents/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>
```
至此，终于搞定了语法高亮插件的问题。本来想截点图，不过想想应该没必要吧，因为有个活生生的例子，就在这篇文章里第一段代码。

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

文章评论