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