ckeditor4整合高亮插件syntaxhighlight实例

第一步：下载ckeditor-syntaxhighlight插件，下载地址：
https://github.com/dbrain/ckeditor-syntaxhighlight，下载完成解压，将plugins文件夹拷到ckeditor(当前版本是4.1.2)的目录下，合并同名文件夹！

第二步：打开config.js
增加    config.extraPlugins = "syntaxhighlight";行
并在面板配置中增加syntaxhighlight，如下

CKEDITOR.editorConfig = function( config ){    config.extraPlugins = "syntaxhighlight";	config.toolbar = 'Index';	config.toolbar_Index =	[        ['Source','Preview','Maximize'],        ['Cut','Copy','Paste','PasteText'],        ['SelectAll','RemoveFormat'],        ['Bold','Italic','Underline','Strike'],        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],        ['Link','Unlink','Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],        ['Font', 'FontSize', 'TextColor', 'BGColor', 'syntaxhighlight']    ];};

第三步：打开ckeditor/plugins/syntaxhighlight/plugin.js,将

var pluginName = 'code';

改成

var pluginName = 'syntaxhighlight';

然后打开ckeditor/plugins/syntaxhighlight/lang/en.js,将

CKEDITOR.plugins.setLang('syntaxhighlight', 'en',{    syntaxhighlight:{        title: 'Add or update a code snippet',        sourceTab: 'Source code',        langLbl: 'Select language',        advancedTab: 'Advanced',        hideGutter: 'Hide gutter',        hideGutterLbl: 'Hide gutter & line numbers.',        hideControls: 'Hide controls',        hideControlsLbl: 'Hide code controls at the top of the code block.',        collapse: 'Collapse',        collapseLbl: 'Collapse the code block by default. (controls need to be turned on)',        showColumns: 'Show columns',        showColumnsLbl: 'Show row columns in the first line.',        lineWrap: 'Disable line wrapping',        lineWrapLbl: 'Switch off line wrapping.',        lineCount: 'Default line count',        highlight: 'Highlight lines',        highlightLbl: 'Enter a comma seperated lines of lines you want to highlight, eg <em>3,10,15</em>.'    }});

改成

CKEDITOR.plugins.setLang('syntaxhighlight', 'en',{    title: 'Add or update a code snippet',    sourceTab: 'Source code',    langLbl: 'Select language',    advancedTab: 'Advanced',    hideGutter: 'Hide gutter',    hideGutterLbl: 'Hide gutter & line numbers.',    hideControls: 'Hide controls',    hideControlsLbl: 'Hide code controls at the top of the code block.',    collapse: 'Collapse',    collapseLbl: 'Collapse the code block by default. (controls need to be turned on)',    showColumns: 'Show columns',    showColumnsLbl: 'Show row columns in the first line.',    lineWrap: 'Disable line wrapping',    lineWrapLbl: 'Switch off line wrapping.',    lineCount: 'Default line count',    highlight: 'Highlight lines',    highlightLbl: 'Enter a comma seperated lines of lines you want to highlight, eg <em>3,10,15</em>.'});

到此，插件配置完毕，已经可以正常使用了，但是前端记得要引用syntaxhighlighter相关的JS与css.