简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > php教程 > PHP开发 > 本文

kindeditor与SyntaxHighlighter通用整合方法

WBOY
リリース： 2016-06-07 17:24:06
オリジナル
1416 人が閲覧しました

最近笔者运用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;",把语法提出来就是：

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();       
                    }       
                }
\n&#39; + K.escape(code) + &#39;
ログイン後にコピー
的作用就是把被着色的代码放在
ログイン後にコピー
之间。
结合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;
ログイン後にコピー
 ';       
              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整合方法其实都是大同小异。
                

            

            

                                

                    関連ラベル：
                    

                        gt javascript nbsp quot script                    

                

                                
ソース：php.cn

                            

            

                                    
                        前の記事：对thinkphp3.1查询条件array ('in',$getid)条件的理解
                    
                                    
                        次の記事：phpcms v9二次开发之数据模型类
                    
                            

            

       
                
このウェブサイトの声明

                
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

            

           

            

                
著者別の最新記事

                
            

            

                
最新の問題

                

                                        

                        

                            function_exists() はカスタム関数を決定できません
                            Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
                            

                                

                                     から 2024-04-29 11:01:01
                                

                                

                                    
  0 

                                    
2

                                    
1429

                                

                            

                        

                    

                    

                                        

                        

                            親ウィンドウには出力がありません
                            document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
                            

                                

                                     から 2024-04-18 23:52:34
                                

                                

                                    
  0 

                                    
1

                                    
1284

                                

                            

                        

                    

                    

                                        

                        

                            PX から REM への自動変換エラー
                            <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
                            

                                

                                     から 2024-04-16 09:34:16
                                

                                

                                    
  0 

                                    
0

                                    
4687

                                

                            

                        

                    

                    

                                    

            

            

                

                    
関連トピック

                    詳細>
                    
                

                

                    
                

            

        

    

    

        

            
人気のおすすめ

            

                
    
                                    

            

        

        
        

            

                
人気のチュートリアル

                詳細>
                
            

            

                

                    
関連するチュートリアル 

                    
人気のおすすめ

                    
最新のコース

                

                
                
                
            

            
        


        

            

                
最新のダウンロード

                詳細>
                
            

                        
            

                

                    
ウェブエフェクト 

                    
公式サイト

                    
サイト素材

                    
フロントエンドテンプレート

                

                
                
                
                
            

            
        

    





    

        

            

                

                    

                        私たちについて
                        免責事項
                        Sitemap
                        

                    

                    
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！