专注于WEB技术的IT博客

kindeditor与SyntaxHighlighter通用整合方法

时间:2012-09-13分类: wblog浏览:7829
分享到:

最近笔者运用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 = 'scripts/clipboard.swf';       
        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;       
}       
</pre>       
</html>

显然被着色的代码是放在<pre class="brush: c-sharp;"></pre>之间的,其原理是给代码加上一个样式class="brush: c-sharp;",把语法提出来就是:


<pre class="brush: 语言脚本;">被着色的代码</pre>


说明:上面语法的红色部分就是插入SyntaxHighlighter的样式,例如插入PHP语言,那么就是<pre class="brush: php;">php代码</pre>,其它的类似。


关注细节:
如果插入的是<pre class="brush:php;toolbar:false;">php代码</pre>就是多了"toolbar:false;",这时代码同样是高亮显示,但是把光标移到代码时没有弹出复制功能,大家不要小视这个功能,没有它你选取代码后复制,会带上许多序号,你要运行这些代码先得把这些序号去除,很费时。要解决这个问题,只要把"toolbar:false;"去掉即可,其方法下面会提到。

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

click : function(e) {       
           var type = K('.ke-code-type', dialog.div).val(),       
               code = textarea.val(),       
               cls = type === '' ? '' :  ' lang-' + type,       
               html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';       
               self.insertHtml(html).hideDialog().focus();       
                    }       
                }

<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre>的作用就是把被着色的代码放在<pre></pre>之间。
结合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' + K.escape(code) + '</pre> ';       
              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 = 'scripts/clipboard.swf';       
        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的代码着色样式,然后在前台加载SyntaxHighlighter的相关文件使代码高亮显示。明白了这个原理后,不管kindeditor和SyntaxHighlighter是什么版本的整合或者其它在线编辑器和SyntaxHighlighter整合方法其实都是大同小异。

猜你喜欢
kindeditor与SyntaxHighlighter通用整合方法2
KindEditor在thinkphp上的使用方法
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/3.html,谢谢。
  • 评论
  • 赞助本站