CKEditor For WordPress集成WP-CodeBox

  CKEditor For WordPress。CKEditor是一款优秀的编辑器,由前身台甫鼎鼎的FCKEditor完全重写而来,Dean lee等人将其集成到WordPress中。 之前笔者也用过Dean's FCKEditor For WordPress的,不外它很难跟代码高亮插件集成,无奈只能放弃,所以又改装了此插件,此刻用来还不错。

  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下字体下拉列表欠悦目,但编辑文章所用字体巨细正符合,看你自由取舍了~~ 这样我们的编辑器已经能正常显示并编辑中文了。

  英文主题下中文显示很丢脸,行间距太小,有些同学不知道奈何让主题支持中文,这里我讲一下,在%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字符举办转义,更多说明请拜见

  Ⅱ、窜改%yourWebSite%/wp-content/plugins/ckeditor-for-wordpress/ckeditor.config.js,在CKEDITOR.editorConfig = function(config) { … }要领体内添加

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

  懒惰匹配<pre lang="xx">…</pre>并将其配置为掩护性代码,确保CKeditor不会对其作任何变动。此要领也可行,可是在可视化模式下看不到源码,只有跳出编辑模式查察文章才可以看到,暂不回收。

CKEditor 在线html编辑器 v3.6.4下载

CKEditor For WordPress集成WP-CodeBox

界面预览

WordPress v3.5.2 简体中文版下载

CKEditor For WordPress集成WP-CodeBox

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/10507.html