为WordPress编辑器加代码高亮功能

作者: gaohailin 分类: 网站技术 发布时间: 2011-05-21 06:07

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

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

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

  1

  代码

  它并不能使代码高亮,要时代码高亮,还需安装 wordrepss 的代码高亮插件,而且是要使用以上语法的代码高亮插件。

  googlecode中 CKeditor 的 SyntaxHighlighter 插件已经很久没升级了,但是在 SyntaxHighlighter 系列的代码高亮插件升级后,出现小小的 BUG ,于是有人修改了这个 按钮插件,使其更好的支持新版的 SyntaxHighlighter 系列代码高亮插件。

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

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

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

  

2010082301.jpg

 

  

2010082302.jpg

 

  

2010082303.jpg

 

  需要下载的,看清下面。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

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