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，同时在此附上完整的整合代码：

完整整合插件下载（包括最新版ckeditor[4.1.2]与经过处理的syntaxhighlighter3.0.83）下载 注意：下载后如果无法打开，请手动为文件加上.rar的后缀名即可