kindeditor与SyntaxHighlighter通用整合方法-PHP开发-PHP中文網

最近笔者运用Thinkphp框架开发了一个博客系统，就叫它WBlog吧，当然目前流行的博客系统有很多，如wordpress,z-blog等，但我觉得wordpress似乎太笨重了，z-blog又是asp脚本的，本人对asp不是很了解，找不到称心如意的，那就干脆自己开发吧！

考虑到以后写代码方面的博文比较多，为了看起来优雅，代码高亮显示功能是必须的。网上流行的编辑器比较多，但自身带有代码高亮显示功能的却很少，最后找到百度在线编辑器ueditor。ueditor的代码高亮显示功能确实很好，插件包却相当地大，解压后10多M!我博客的编辑器用的是kindeditor，经过我整理不过几百KB，整个博客的文件才不到3M，如果改换ueditor,要带上这么笨重的包袱，运行起来肯定也不爽。我研究了一下ueditor，发现它的代码高亮显示功能原来是整合了syntaxhighlighter插件，于是我就有了kindeditor整合syntaxhighlighter的想法，百度一下，网上关于kindeditor整合syntaxhighlighter还真不少，众说纷纷，但却局限于某个版本，或者连版本也不给出，我乱了。没办法，只好自己摸索了。

为什么syntaxhighlighter可以使代码高亮显示？

带着这个问题到http://alexgorbatchev.com/SyntaxHighlighter/download/去下载一个SyntaxHighlighter2.1.364插件包，那里有许多版本的，低版本的解压后有一个实例文件test.html，用浏览器打开显示的是一个代码高亮显示的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">       
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">       
<head>       
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
    <title>SyntaxHighlighter Build Test Page</title>       
    <script type="text/javascript" src="scripts/shCore.js"></script>       
    <script type="text/javascript" src="scripts/shBrushBash.js"></script>       
    <script type="text/javascript" src="scripts/shBrushCpp.js"></script>       
    <script type="text/javascript" src="scripts/shBrushCSharp.js"></script>       
    <script type="text/javascript" src="scripts/shBrushCss.js"></script>       
    <script type="text/javascript" src="scripts/shBrushDelphi.js"></script>       
    <script type="text/javascript" src="scripts/shBrushDiff.js"></script>       
    <script type="text/javascript" src="scripts/shBrushGroovy.js"></script>       
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>       
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>       
    <script type="text/javascript" src="scripts/shBrushPhp.js"></script>       
    <script type="text/javascript" src="scripts/shBrushPlain.js"></script>       
    <script type="text/javascript" src="scripts/shBrushPython.js"></script>       
    <script type="text/javascript" src="scripts/shBrushRuby.js"></script>       
    <script type="text/javascript" src="scripts/shBrushScala.js"></script>       
    <script type="text/javascript" src="scripts/shBrushSql.js"></script>       
    <script type="text/javascript" src="scripts/shBrushVb.js"></script>       
    <script type="text/javascript" src="scripts/shBrushXml.js"></script>       
    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>       
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>       
    <script type="text/javascript">       
        SyntaxHighlighter.config.clipboardSwf = &#39;scripts/clipboard.swf&#39;;       
        SyntaxHighlighter.all();       
    </script>       
</head>       
                   
<body >       
<h1>SyntaxHihglighter Test</h1>       
<p>This is a test file to insure that everything is working well.</p>       
                   
<pre class="brush: c-sharp;">       
function test() : String       
{       
    return 10;       
}       

登入後複製

显然被着色的代码是放在

登入後複製

之间的，其原理是给代码加上一个样式class="brush: c-sharp;",把语法提出来就是：

1	`brush: 语言脚本</span>;">被着色的代码`

登入後複製

说明：上面语法的红色部分就是插入SyntaxHighlighter的样式，例如插入PHP语言，那么就是

php代码

登入後複製

,其它的类似。

关注细节：
如果插入的是

php代码

登入後複製

就是多了"toolbar:false;"，这时代码同样是高亮显示，但是把光标移到代码时没有弹出复制功能，大家不要小视这个功能，没有它你选取代码后复制，会带上许多序号，你要运行这些代码先得把这些序号去除，很费时。要解决这个问题，只要把"toolbar:false;"去掉即可，其方法下面会提到。

到这里，我明白了syntaxhighlighter使代码高亮显示的原因。
接下来打开kindeditor-4.1.1\plugins\code\code.js文件，找到下面的代码片断:

click : function(e) {       
           var type = K(&#39;.ke-code-type&#39;, dialog.div).val(),       
               code = textarea.val(),       
               cls = type === &#39;&#39; ? &#39;&#39; :  &#39; lang-&#39; + type,       
               html = &#39;<pre class="prettyprint&#39; + cls + &#39;">\n&#39; + K.escape(code) + &#39;

登入後複製

'; self.insertHtml(html).hideDialog().focus(); } }

1	`\n' + K.escape(code) + '`

登入後複製

的作用就是把被着色的代码放在

登入後複製

之间。
结合syntaxhighlighter代码着色的办法把上面的代码片断改成:

click : function(e) {       
          var type = K('.ke-code-type', dialog.div).val(),       
              code = textarea.val(),       
              cls = type === '' ? '' :  type,       
              html = '<pre class="brush:' + cls + '">\n&#39; + K.escape(code) + &#39;</pre><div class="contentsignin">登入後複製</div>

'; self.insertHtml(html).hideDialog().focus(); } }

这样做的意义是，在kindeditor编辑器插入代码时，插入了样式 class="brush:' + cls + '">，而这个样式的作用就是负责代码着色的，代码中的cls变量是在编辑器插入的被着色的语言名称。

使用方法
在需要显示代码高亮显示的模板前面加载如下文件:

<script type="text/javascript" src="scripts/shCore.js"></script>       
    <script type="text/javascript" src="scripts/shBrushBash.js"></script>       
    <script type="text/javascript" src="scripts/shBrushCpp.js"></script>       
    <script type="text/javascript" src="scripts/shBrushCSharp.js"></script>       
    <script type="text/javascript" src="scripts/shBrushCss.js"></script>       
    <script type="text/javascript" src="scripts/shBrushDelphi.js"></script>       
    <script type="text/javascript" src="scripts/shBrushDiff.js"></script>       
    <script type="text/javascript" src="scripts/shBrushGroovy.js"></script>       
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>       
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>       
    <script type="text/javascript" src="scripts/shBrushPhp.js"></script>       
    <script type="text/javascript" src="scripts/shBrushPlain.js"></script>       
    <script type="text/javascript" src="scripts/shBrushPython.js"></script>       
    <script type="text/javascript" src="scripts/shBrushRuby.js"></script>       
    <script type="text/javascript" src="scripts/shBrushScala.js"></script>       
    <script type="text/javascript" src="scripts/shBrushSql.js"></script>       
    <script type="text/javascript" src="scripts/shBrushVb.js"></script>       
    <script type="text/javascript" src="scripts/shBrushXml.js"></script>       
    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>       
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>       
                       
    <script type="text/javascript">       
        SyntaxHighlighter.config.clipboardSwf = &#39;scripts/clipboard.swf&#39;;       
        SyntaxHighlighter.all();       
    </script>

登入後複製

那么多文件，大家看起来肯定很晕吧！我也觉得晕。不过我们可以根据需求来简化，比如我选用的语言是PHP，那么我导入文件，像shBrushVb.js对应VB语言,shBrushJava.js对应JAVA语言等等，这些我用不上的，那我就省去了,然后再把要用到的js文件全部合并放到shCore.js中，两个css文件合并到shCore.css中，现在只需导入两个文件了，这下看起来没那么晕了吧？导入的文件是少了，但我建议不要图简便而把这些文件放在一些公共文件如head.html,这样会使那些没有必要引入head.html文件的页面影响打开速度，而是把那些文件导入需要代码着色的页面。

值得注意的是，在整合中导入文件的路径要正确，我把整合的插件用在thinkphp开发的WBlog博客系统中，在调试过程中即使方法没有错，会出现各种种样的错误，原因在于更改了文件没有删除缓存，如果再有错误，重启一下系统。

上效果截图

kindeditor与SyntaxHighlighter通用整合方法

经验总结：kindeditor整合SyntaxHighlighter其原理就是:kindeditor插入代码的同时嵌入SyntaxHighlighter的代码着色样式，然后在前台加载SyntaxHighlighter的相关文件使代码高亮显示。明白了这个原理后，不管kindeditor和SyntaxHighlighter是什么版本的整合或者其它在线编辑器和SyntaxHighlighter整合方法其实都是大同小异。