Home > php教程 > PHP开发 > body text

kindeditor与SyntaxHighlighter通用整合方法

WBOY
Release: 2016-06-07 17:24:06
Original
1467 people have browsed it

最近笔者运用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;       
}       
Copy after login

显然被着色的代码是放在

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


brush: 语言脚本</span>;">被着色的代码
Copy after login


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

php代码
Copy after login
,其它的类似。


关注细节:
如果插入的是

php代码
Copy after login
就是多了"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;
Copy after login
'; self.insertHtml(html).hideDialog().focus(); } }

\n&#39; + K.escape(code) + &#39;
Copy after login
的作用就是把被着色的代码放在
Copy after login
之间。
结合syntaxhighlighter代码着色的办法把上面的代码片断改成:

click : function(e) {       
          var type = K('.ke-code-type', dialog.div).val(),       
              code = textarea.val(),       
              cls = type === '' ? '' :  type,       
              html = '
\n&#39; + K.escape(code) + &#39;
Copy after login
'; 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>
Copy after login


那么多文件,大家看起来肯定很晕吧!我也觉得晕。不过我们可以根据需求来简化,比如我选用的语言是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整合方法其实都是大同小异。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template