ckeditor4整合高亮插件syntaxhighlight实例

发表于2013-07-03 17:36:53

第一步:下载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的后缀名即可