ckeditor是一款功能强大的可视化网页编辑器，提供了丰富的工具栏，可以实现复杂的页面编辑功能，包括图文混排。但是，我下载的ckeditor_3.6.2版本并没有提供源码高亮的插件，而源码高亮功能在提供源码显示的网站或者个人博客中都非常重要，否则让读者从一大堆混乱无序、无高亮显示的源代码中读取需要的信息将会是一件非常不愉快的工作。通过在网上搜集资料，看到目前syntaxhighlighter提供了强大的源码高亮功能，于是本文将介绍如何开发cekeitor插件，将syntaxhighlighter整合到ckeditor编辑器中，增强ckeditor源码排版的功能。

一、ckeditor参数配置：

首先根据自己的需要对ckeditor的工具栏进行配置，ASP.NET(C#)站点ckeditor的使用总结介绍了直接在ASP.NET页面以及ckeditor.js中进行配置的方法，这种方法非常灵活，能够理解ckeditor背后的运作机制，但是比较复杂，配置代码比较分散，不便于管理和维护，同时，由于未知的原因，对ckeditor.js使用spket+ellipse进行格式化以后，ckeditor编辑器便无法再IE浏览器中显示，其它浏览器显示却正常，测试过的浏览器包括Fierfox 10.0.2和Google Chrome 17.0.963.56，在IE 8.0.7600.16385浏览器却无法显示，恳请高人指点！本次的配置采用另一种方案，将所有的配置均在config.js文件中完成，不需要对ckeditor.js进行任何编辑，最终的../ckeditor_3.6.2/config.js完整代码如下：

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
    // 默认语言
    config.language = 'zh-cn';
    config.uiColor = '#AADC6E';
    config.plugins+=",insertcode";
    config.extraPlugins="insertcode";    
    
    //设置编辑模式:1:<p></p>,2:<br>,3<div></div>               
    config.enterMode = 1;
    //对应config.toolbar_Custom
    config.toolbar = "Custom";
    config.height = "520px";
    //皮肤
    config.skin="v2";
    
    config.toolbar_Custom=[
        {
            name:'align',
            items:['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
        },{
            name:'tools',
            items:['TextColor','BGColor','-','Format','FontSize','Bold',
                   'Italic','Underline','Subscript','Superscript','Link','Unlink']
        },{
            name:'past',
            items:['Paste','PasteText','PasteFromWord']
        },{
            name:'link',
            items:['Image','Flash','Table','SpecialChar','PageBreak']
        },{
            name:'source',
            items:['insertcode','Maximize','Preview']
        }];
};

 

需要特别注意的是对config.plugins进行了赋值，增加了源码高亮插件，其它的配置含义都比较直观，不再赘述。

二、源码高亮插件的设计

所谓的源码高亮插件，本质上其实是增加一个插入对话框，用户点击确定按钮时将代码添加到<pre></pre>块中，根据用户选择的语言设置<pre></pre>块的class样式，下面是一个插入到页面中的代码块：

<pre class="brush:csharp;">
   protected void Page_Load(object sender, EventArgs e)
    {
        ////设置编辑模式              
        ck_content.config.enterMode = EnterMode.;
        //对应i.toolbar_Custom
        ck_content.config.toolbar = "Custom";
        ck_content.config.height = "520px";
    }
</pre>

在最终生成的页面中，执行下面的代码既可以实现源码高亮效果：

    //源码高亮的代码
    highLighter:function(){
        var hiLighter=false;
        var syntaxDIR="/source/syntaxhighlighter_3.0.83/";        
        if($("pre").length>0){
            hiLighter=true;
            $("head").append('<script type="text/javascript" src="'+syntaxDIR+'scripts/shCore.js"></script>');            
            $("head").append('<script src="'+syntaxDIR+'scripts/shAutoloader.js" type="text/javascript"></script>');
            $("head").append('<link type="text/css" rel="stylesheet" href="'+syntaxDIR+'styles/shCoreDefault.css"/>');
            var path=function(){
              var args = arguments,result = [];
                   
              for(var i = 0; i < args.length; i++)
                  result.push(args[i].replace('@', syntaxDIR+'scripts/'));
                   
              return result
            };
            SyntaxHighlighter.autoloader.apply(null, path(
              'applescript            @shBrushAppleScript.js',
              'actionscript3 as3      @shBrushAS3.js',
              'bash shell             @shBrushBash.js',
              'coldfusion cf          @shBrushColdFusion.js',
              'cpp c                  @shBrushCpp.js',
              'c# c-sharp csharp      @shBrushCSharp.js',
              'css                    @shBrushCss.js',
              'delphi pascal          @shBrushDelphi.js',
              'diff patch pas         @shBrushDiff.js',
              'erl erlang             @shBrushErlang.js',
              'groovy                 @shBrushGroovy.js',
              'java                   @shBrushJava.js',
              'jfx javafx             @shBrushJavaFX.js',
              'js jscript javascript  @shBrushJScript.js',
              'perl pl                @shBrushPerl.js',
              'php                    @shBrushPhp.js',
              'text plain             @shBrushPlain.js',
              'py python              @shBrushPython.js',
              'ruby rails ror rb      @shBrushRuby.js',
              'sass scss              @shBrushSass.js',
              'scala                  @shBrushScala.js',
              'sql                    @shBrushSql.js',
              'vb vbnet               @shBrushVb.js',
              'xml xhtml xslt html    @shBrushXml.js'
            ));                        
        }
        if(hiLighter)
            SyntaxHighlighter.all();
    }