WordPress编辑器加代码高亮功能

WP安装之后,后台编辑器使用的是自带的 TinyMCE 编辑器,功能及其简单,排版功能不如人意。虽然可以添加代码高亮插件,但是对于程序员来说,要排版又要代码高亮的话,必须在可视化模式和源码模式不断切换,但是 TinyMCE 切换之后,会使代码高亮失去效果,造成排版混乱。

排版好的编辑器还有 CKeditor 等,但是,如何在其基础上,添加代码高亮插件 SyntaxHighlighter 的插入按钮呢?网上搜了,出了一大堆,我就不写了,我就说说原理吧。

CKeditor 的每一个按钮都是属于它的一个插件,于是 goolecode 上有人开发了 SyntaxHighlighter 的 code 插件,用于插入 SyntaxHighlighter 代码高亮的特定语法。

<pre class=”brush:php”>代码</pre>

 

它并不能使代码高亮,要时代码高亮,还需安装 wordrepss 的代码高亮插件,而且是要使用以上语法的代码高亮插件。
googlecode中 CKeditor 的 SyntaxHighlighter 插件已经很久没升级了,但是在 SyntaxHighlighter 系列的代码高亮插件升级后,出现小小的 BUG ,于是有人修改了这个 按钮插件,使其更好的支持新版的 SyntaxHighlighter 系列代码高亮插件。

理论说了这么多,大家应该明白他的运作原来了,总体的意思,我简单的阐述以下,其实就是为 wordpress 的 SyntaxHighlighter 系列代码高亮插件在 CKeditor 添加 按钮。

由于给CKeditor 插件添加 按钮比较繁琐,而且 goolgecode 上的 CKeditor 按钮插件有点小BUG,我就将解决了 BUG 的按钮插件集成到 CKeditor 提供给大家,一共两个,均是由 CKeditor for wordpress 1.01 版添加 代码插入按钮插件修改二来的,不同的是,一个带 CKfinder,一个不带 CKfinder,至于 CKfinder 是什么,我就不说了,

附图,需要下载的清往下看:

 

 

需要下载的,看清下面。

ckeditor-for-wordpress-with-ckfinder

ckeditor-for-wordpress-1.0.5-with-ckfinder.zip (2.03M)

ckeditor-for-wordpress-without-ckfinder

ckeditor-for-wordpress-1.0.5-without-ckfinder.zip (1008.76K)

 

注意,通过上面的理解,应该知道,这个编辑器插件,只有输入代码的功能,并没有代码高亮的功能,要实现代码高亮,需要支持上面语法的 wordpress 代码高亮插件。使用这个代码高亮语法的 wordpress 插件是:

Syntax Highlighter and Code Colorizer for WordPress

 

安装很简单,在wordpress插件中搜索安装即可,但是很奇怪,安装之后,名字变成了

Syntax Highlighter and Code Prettifier Plugin for WordPress

 

希望 使用 wordpress 的程序员,能够使用上好的编辑器与代码高亮插件。

顺带提一句,我也曾试过 CK and SyntaxHighlighter 的 wodpress 插件。这个插件只能运行在 WP3.0以下版本,不能运行包括 WP3.0 在内的高级 WP 版本。而且在插入代码的时候,会初小代码丢失的问题。

2011.2.19 更新下载地址,并使用最新版 ckeditor for wordpress 制作,也就是1.05那个版本,安装后不会提示有升级,以后的话,可能不会在升级了。这次是应留言发上来的。还有就是,以前那个地址其实可以下的,但是由于GFW的原因,你懂的。
晚上新增Dbank网盘。

{ 发表评论? }

  1. 三叶草

    额,好复杂~

  2. king2088

    不错哦,我也换一个来试试。

  3. sharktime

    下载连接失效了哦,麻烦更新一下

  4. 代码部落(Winson)

    这个好像是新的版本?之前用过一个,不太好用就放弃了,呵

  5. 蓝天下

    博主能不能说说是怎么把这个按钮加到ckeditor里的?我试了很长时间都不行。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>