让CKEditor For WordPress集成WP-CodeBox高亮代码显示

　　本文转自：http://chiefleo.me/archives/306

　　CKEditor For WordPress：CKEditor：一 款优秀的编辑器，由前身大名鼎鼎的FCKEditor完全重写而来，Dean lee等人将其集成到WordPress中。 其实以前我也用Dean's FCKEditor For WordPress的，不过它很难跟代码高亮插件集成，无奈只能放弃，又出于CFW作者Dean lee的信任，所以又改装了此插件，现在用来还不错。

　　WP-CodeBox：语法高亮插件，支持多语言语法高亮。经若干款同类插件与CKEditor集成实验后，最终确定选择此插件。原因：代码可折叠 、兼容性好 、代码可下载 、高亮代码符合要求。 如果你的博客经常要插入程序代码，同时又想看起来更美观的话，推荐安装。

　　不过不知为何，作者的主页始终不能登录，好像插件也不再更新了。

　　下面讲一下两款插件的集成步骤：

　　1、安装CKEditor For WordPress

　　管理员页面—>>>插件—>>>添加新插件—>>>输入ckeditor—>>>找到CKEditor For WordPress(作者Dean Lee)—>>>安装—>>>激活。在管理员页面下方【CKEditor】菜单处可配置相关参数。

　　2、安装WP-CodeBox

　　步骤同1类似，输入框输入WP-CodeBox，选择安装并激活即可。在管理员页面【设置】-【代码高亮】菜单处可配置相关参数。

　　3、设置编辑器中文

　　CKEditor默认字体是没有中文的，需要手动添加中文字体。

　　Ⅰ、编辑器字体下拉框添加中文

　　打开服务器%yourWebSite%/wp-content/plugins/ckeditor-for-wordpress/目录，编辑文件ckeditor.config.js(请选择UTF-8文件编辑器，以确保中文不会乱码)，在CKEDITOR.editorConfig = function(config) { … }方括号内添加中文字体声明(注意是英文格式的单引号!)—>>>

　　config.language = 'zh-cn';

　　config.font_names = '微软雅黑;Arial;Courier New;Times New Roman;Verdana;sans-serif';

　　编辑器body设置默认中文

　　还需要修改%yourWebSite%/wp-content/plugins/ckeditor-for-wordpress/ckeditor/目录下的contents.css，修改body{…}中font部分成以下内容，这样可视化编辑器字体默认就是微软雅黑,大小为16px了。

　　/* Font */

　　font-size: 16px;

　　注：12px下字体下拉列表显示美观，但编辑中文显示太小，每次还得手动 调大小;而16px下字体下拉列表不好看，但编辑文章所用字体大小正合适，看你自由取舍了~~ 这样我们的编辑器已经能正常显示并编辑中文了。

　　BTW：英文主题下中文显示很难看，行间距太小，有些同学不知道怎样让主题支持中文，这里我讲一下，在

　　%yourWebSite%/wp-content/themes/%你的主题%/style.css中，替换所有的font-family值为微软雅黑, Arial, Helvetica, sans-serif,Times New Roman;

　　这样主题就可以正常显示中文了。

　　4、ckeditor集成codebox

　　只在CK的HTML模式下编辑，如果插入<pre lang="lang">code…</pre>，那么代码是可以正常显示的;但是如果在HTML编辑完又进入可视化模式的话，那么会将code部分所有的html字符会被转义，例如本来代码是

　　View Code JAVA1 System.out.println("Hello World!");

　　经过转义以后查看文章就变成了下面的格式

　　System.out.println("Hello World!");

　　这样明显是不符合我们要求的，解决此问题有两种方法(我现在使用方法Ⅰ)：

　　改动%yourWebSite%/wp-content/plugins/ckeditor-for-wordpress/ckeditor.config.js，在CKEDITOR.editorConfig = function(config) { … }方括号内添加

　　config.entities = false;

　　避免由HTML切换到可视化模式对HTML字符进行转义，更多说明请参见http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.entities

　　Ⅱ改动%yourWebSite%/wp-content/plugins/ckeditor-for-wordpress/ckeditor.config.js，在CKEDITOR.editorConfig = function(config) { … }方括号内添加

　　config.protectedSource.push(/<pre[sS]*?pre>/g);

　　懒惰匹配<pre lang="xx">…</pre>并将其设置为保护性代码，确保CKeditor不会对其作任何更改。此方法也可行，但是在可视化模式下看不到源码，只有跳出编辑模式查看文章才可以看到，暂不采用。