kindeditor配合SyntaxHighlighter实现代码高亮

最新推荐文章于 2024-03-16 09:54:52 发布

mirrorzhou

最新推荐文章于 2024-03-16 09:54:52 发布

阅读量1.7k

点赞数

分类专栏： html JS 文章标签： kindeditor SyntaxHighlighter

本文链接：https://blog.youkuaiyun.com/mirrorzhou/article/details/8678558

版权

html 同时被 2 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

原本在个人博客中使用了Ckeditor作为文本编辑器，但是发现没有提供插入代码的功能，网上有一些网友自己添加的插入代码插件，用起来有BUG。然后发现kindeditor本身是带有代码插入功能和代码高亮功能的，但是代码高亮功能的效果没有其他网上的一些华丽。于是本人自己修改了kindeditor的插入代码功能的一些代码，然后配合上SyntaxHighlighter插件，实现如下的代码高亮效果；

1.首先我们需要到kindeditor官网上下载最新的文件包。解压到自己的项目目录下。其他安装使用方法同官网上一样，这里我就不多介绍了。

2.下载SyntaxHighlighter的文件包，使用方法官网上也有，这里也不多介绍。

3.接下来是主要修改的地方，其实很简单，我们参考SyntaxHighlighter的插件原理，无非是让用户在需要高亮的代码部分，使用<pre class="js">.....</pre>这样的标签给包括起来，其中的class中的值则为需要解析的代码的类型，在查看了kindeditor的plugins文件夹下的code文件夹中的code.js文件。该文件就是用来实现编辑器中插入代码功能的。

我们查看该文件内容：

 
        KindEditor.plugin( 
        'code' 
        ,  
        function 
        (K) { 
       
        var 
        self =  
        this 
        , name =  
        'code' 
        ; 
       
        self.clickToolbar(name,  
        function 
        () { 
       
        var 
        lang = self.lang(name +  
        '.' 
        ), 
       
        html = [ 
        '<div style="padding:10px 20px;">' 
        , 
       
        '<div class="ke-dialog-row">' 
        , 
       
        '<select class="ke-code-type">' 
        , 
       
        '<option value="js">JavaScript</option>' 
        , 
       
        '<option value="html">HTML</option>' 
        , 
       
        '<option value="css">CSS</option>' 
        , 
       
        '<option value="php">PHP</option>' 
        , 
       
        '<option value="java">Java</option>' 
        , 
       
        '<option value="cpp">C/C++</option>' 
        , 
       
        '<option value="xml">XML</option>' 
        , 
       
        '<option value="sql">SQL</option>' 
        , 
       
        '<option value="">Other</option>' 
        , 
       
        '</select>' 
        , 
       
        '</div>' 
        , 
       
        '<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>' 
        , 
       
        '</div>' 
        ].join( 
        '' 
        ), 
       
        dialog = self.createDialog({ 
       
        name : name, 
       
        width : 450, 
       
        title : self.lang(name), 
       
        body : html, 
       
        yesBtn : { 
       
        name : self.lang( 
        'yes' 
        ), 
       
        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(); 
       
        } 
       
        } 
       
        }), 
       
        textarea = K( 
        'textarea' 
        , dialog.div); 
       
        textarea[0].focus(); 
       
        }); 
       
        });

可以看到在上面的代码中，其中有一段是定义了插入代码时选择的代码类型的select标签内容。而下面的代码处理方法和SyntaxHighlighter惊人的相似，都是在用户输入的代码前后加上<pre>标签，不过标签中的内容不同，所以我们这里需要修改的就是把他原本的pre内容，改成SyntaxHighlighter需要的格式。（上面的代码是我已经改过的），可以直接复制使用，同时我在select标签内容中只定义了我需要使用的几种代码类型，具体的SyntaxHighlighter需要的代码类型的value格式可以参见http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

4.完成了上面的修改工作，我们要注意在需要使用代码高亮的页面中需要引入的几个文件

 
        <link type= 
        "text/css" 
        rel= 
        "stylesheet" 
         href= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/styles/shCoreDefault.css" 
        /> 
       
 
        <link type= 
        "text/css" 
        rel= 
        "stylesheet" 
         href= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/styles/shThemeRDark.css" 
        /> 
       
 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shCore.js" 
        ></script> 
       

其中2个CSS文件定义的是高亮代码的显示效果，类似不同的IDE里代码显示的颜色效果一样，而我个人比较喜欢shThemeRDark这个主题下的代码样式。

第三个JS文件是必须的，接下来我们还需要引入我们之前定义的需要解析的代码类型对应的JS文件。比如我的页面：

 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js" 
        ></script> 
       
 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shBrushXml.js" 
        ></script> 
       
 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shBrushPhp.js" 
        ></script> 
       
 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shBrushJava.js" 
        ></script> 
       
 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shBrushCss.js" 
        ></script> 
       
 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shBrushCpp.js" 
        ></script> 
       
 
        <script type= 
        "text/javascript" 
        src= 
        "/phpwork/myblog/res/js/syntaxhighlighter_3.0.83/scripts/shBrushSql.js" 
        ></script> 
       