ckeditor syntaxhighlighter代码高亮插件配置分享

最近想给自己搭一个代码库网站，顺手写个在线文本编辑器。不过以现在的水平，从头造轮子确实不现实——好在有现成的CKEditor可以用，直接拿来主义。但问题来了：这个编辑器对程序员不太友好，没有代码高亮功能，贴上去的代码看起来乱糟糟的。折腾了一晚上，总算把这事儿搞定了，当然也是站在别人的肩膀上。闲话少说，直接上干货。

第一步，去CKEditor官网下载编辑器本体。第二步，去SyntaxHighlighter官网下载代码高亮插件。第三步，把下面提供的Demo里syntaxhighlighter/shBrushes.js文件也准备好。

下载解压后，按以下目录结构放入项目：

在CKEditor目录下新建一个insertcode文件夹，里面再建一个plugin.js，写入以下代码：

CKEDITOR.plugins.add('insertcode', {
  requires: ['dialog'],
  init: function (a) {
    var b = a.addCommand('insertcode', new CKEDITOR.dialogCommand('insertcode'));
    a.ui.addButton('insertcode', {
      label: a.lang.insertcode.toolbar,
      command: 'insertcode',
      icon: this.path + 'images/code.jpg'
    });
    CKEDITOR.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');
  }
});

目录结构如图：

接着在insertcode下新建images文件夹，放一张16×16的code.jpg图标（Google上随便找一张就行）。再新建dialogs文件夹，新建insertcode.js，写入：

CKEDITOR.dialog.add('insertcode', function (editor) {
  var escape = function (value) {
    return value;
  };
  return {
    title: 'Insert Code Dialog',
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    minWidth: 720,
    minHeight: 480,
    contents: [{
      id: 'cb',
      name: 'cb',
      label: 'cb',
      title: 'cb',
      elements: [{
        type: 'select',
        label: 'Language',
        id: 'lang',
        required: true,
        'default': 'csharp',
        items: [['ActionScript3', 'as3'], ['Bash/shell', 'bash'], ['C#', 'csharp'], ['C++', 'cpp'], ['CSS', 'css'], ['Delphi', 'delphi'], ['Diff', 'diff'], ['Groovy', 'groovy'], ['Html', 'xhtml'], ['Ja vaScript', 'js'], ['Ja va', 'ja va'], ['Ja vaFX', 'jfx'], ['Perl', 'perl'], ['PHP', 'php'], ['Plain Text', 'plain'], ['PowerShell', 'ps'], ['Python', 'py'], ['Ruby', 'rails'], ['Scala', 'scala'], ['SQL', 'sql'], ['Visual Basic', 'vb'], ['XML', 'xml']]
      }, {
        type: 'textarea',
        style: 'width:700px;height:420px',
        label: 'Code',
        id: 'code',
        rows: 31,
        'default': ''
      }]
    }],
    onOk: function () {
      code = this.getValueOf('cb', 'code');
      lang = this.getValueOf('cb', 'lang');
      html = '' + escape(code) + '';
      editor.insertHtml("
" + html + "
");
    },
    onLoad: function () {
    }
  };
});

接下来把代码高亮插件整合进CKEditor。打开ckeditor.js，按Ctrl+F搜索about，找到类似fullPage:false,height:200,plugins:'about,basicstyles的地方，在about后面加上,insertcode，变成plugins:'about,insertcode,basicstyles。

继续搜索about，找到j.add('about',{init:function(l){...}});这段代码，在其分号后面插入j.add('insertcode', {requires: ['dialog'],init: function(l){l.addCommand('insertcode', new a.dialogCommand('insertcode'));l.ui.addButton('insertcode', {label: l.lang.insertcode.toolbar,command: 'insertcode',icon: this.path + 'images/code.jpg'});a.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');}});。

继续在ckeditor.js中搜索i.toolbar_Basic=，这是默认工具栏配置。在数组里加上,-,insertcode，例如['Maximize','ShowBlocks','-','insertcode']，放在合适的位置即可。

最后一步：进入ckeditor/lang目录，分别打开en.js、zh.js、zh-cn.js，在合适位置添加语言映射：

• en.js：,insertcode:'Insert Code'
• zh.js：,insertcode:'插入代碼'
• zh-cn.js：,insertcode:'插入代码'

顺序不能乱。下图是en.js的示例，其他两个类似：

然后在页面头部添加以下引用：

页面正文代码：

后台C#代码：

protected void Unnamed1_Click(object sender, EventArgs e)
{
    this.Literal1.Text = txtcontent.Text;
}

别忘了在页面@ Page指令中加入ValidateRequest="false"，否则提交时会报错。修改后如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>

最终效果图：

至于怎么获取编辑器里的文本内容，白天再写吧——已经凌晨一点多了，该睡了。不过现在这个方案已经相当完善了，如果你还有疑问，多看看Demo文件，或者直接留言交流。