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

2011年7月2日23:21:47 发表评论 12,476 views

 

  本文转自: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不会对其作任何更改。此方法也可行,但是在可视化模式下看不到源码,只有跳出编辑模式查看文章才可以看到,暂不采用。

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: