CKEditor中加入syntaxhighlighter代码高亮插件

为了完成这个任务，我在"ckeditor/plugins/"目录下创建了一个新的"insertcode"目录。接着，在"insertcode"目录下，我新建了一个名为"plugin.js"的文件，并输入了以下代码：

```javascript

CKEDITOR.plugins.add('insertcode', {

requires: ['dialog'],

init: function(editor){

var command = editor.addCommand('insertcode', new CKEDITOR.dialogCommand('insertcode'));

editor.ui.addButton('insertcode', {

label: editor.langsertcode.toolbar,

command: 'insertcode',

icon: this.path + 'images/code.jpg'

});

CKEDITOR.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');

}

});

```

紧接着，我增加了一个"images"目录，并放入了一张名为"code.jpg"的图片。这张图片将作为我们新插件的图标。这张图片已经作为附件上传，大家可以直接使用。

我们需要创建一个新的文件，命名为“insertcode.js”，并把它放在“dialogs”目录下。这个文件将包含我们新的对话框的代码。

以下是“insertcode.js”文件的代码：

```javascript

CKEDITOR.dialog.add('insertcode', function(editor) {

var escapeSpecialChars = function(value) {

return value; // 这里简单的返回了原始值，可以根据需要进行更复杂的处理。

};

return {

resizable: CKEDITOR.DIALOG_RESIZE_BOTH,

minWidth: 720,

minHeight: 480,

contents: [{

id: 'cb',

elements: [

{

type: 'select',

label: '语言',

id: 'lang',

required: true,

'default': 'csharp',

items: [ // 这里列出了支持的所有编程语言选项。

['ActionScript 3', 'as3'], ['Bash/shell', 'bash'], ... ['XML', 'xml']

]

},

{

type: 'textarea',

style: 'width:700px;height:420px',

label: '代码',

id: 'code',

rows: 31,

'default': '' // 这里是默认的代码内容。

}

] // 结束elements数组。

}], // 结束contents对象。

onOk: function() {

var codeValue = this.getValueOf('cb', 'code'); // 获取代码内容。

var langValue = this.getValueOf('cb', 'lang'); // 获取选择的编程语言。

var htmlCode = '' + escapeSpecialChars(codeValue) + ''; // 对代码进行转义处理。

}, // 结束onOk函数。

onLoad: function() { / 这里可以添加一些初始化时的操作，目前为空 / } // 结束onLoad函数。

}; // 结束返回值对象。

}); // 结束函数定义。

我们找到关于“about”的部分，并在其后面增加关于“insertcode”的插件代码。这些代码负责初始化插件，为其添加命令和按钮，并指定相关的图标和对话框。这一过程需要精确的操作，以确保插件能够无缝集成到CKEditor中。

然后，我们进入CKEditor的语言文件，分别在英语、中文等语言文件中添加“insertcode”的相应文本，以确保插件的标签和提示信息能够与编辑器的其他功能相匹配。

对CKEditor的修改完成后，我们还需要在需要高亮代码的页面引入SyntaxHighlighter的相关文件。这些文件包括样式表和脚本文件，它们能够使嵌入的代码高亮显示，提高可读性和美观度。我们还需要在页面上增加一段JS代码，用于配置SyntaxHighlighter并启动代码高亮功能。

我们要解决一个小问题：insertcode图标的title为空。我们将代码中的“label: a.langsertcode.toolbar”（共两处）修改为“label: a.langsertcode”，以解决这个问题。

通过以上的步骤，我们成功地增强了CKEditor的功能，使其能够更好地满足用户的需求。无论是开发者还是内容编辑者，都将从这个插件中获得极大的便利。