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