CKeditor4完美实现代码高亮

网文分类: 

为了在Drupal7+Ckeditor4实现代码高亮,几天来一直都在不断的努力中。

 

关于Ckeditor代码高亮网上的教程大部分都是针对Ckeditor3的,通过手动添加插件的方式,不用说有多麻烦,光Ckeditor3在Drupal下遇到的问题都让我头疼了(至少我这里是这样,虽然用syntaxhighlight实现了代码高亮,但又出现了如超链接无法用了,上传图片无法用来……)。

所以毅然决定放弃Ckeditor3,采用Ckeditor4。

Ckeditor4发布后,官方提供了一个代码高亮的插件:Code Snippet,很容易配置。Code Snippet是基于highlight.js 的代码高亮插件,在Drupal中需要安装highlight.js模块才能在前台显示出效果。可是,虽然highlight.js实现的代码高亮效果很不错,但没有显示行号的功能,要想实现显示行号,可以用自定义Javascript代码块用CSS控制显示效果的方法。但这样又显得啰哩啰嗦的了。

所以,憧憬着能够用Ckeditor4+Syntaxhighlight实现代码高亮。可是目前网上还很难找到支持Ckeditor4的Syntaxhighlight。功夫不负有心人,在国外的一个网站上找到了一个支持Ckeditor4的Syntaxhighlight,可网址让我弄丢了,只好将这个好东西上传到网盘,并且为了朋友们的研究方便,顺便将我这里用到的所有软件一起打包,以供下载。

下载网址:CKeditor4+Syntaxhighlight代码高亮.zip

下载完后将“CKeditor4+Syntaxhighlight代码高亮.zip”解压,得到如下图显示的目录。其中官方插件目录中是我在Ckeditor官方网站上下载的几个Ckeditor4的插件,包括Code Snippet代码高亮插件,有兴趣的可以研究一下。剩下的文件夹中的文件都是必须的。

Ckeditor4高亮插件文件夹中的内容

Drupal模块文件夹中的内容

模块软件文件夹中的内容

 

接下来将详细的安装过程写下来以备朋友们参考。

 

第一步:将ckeditor-7.x-1.16、syntaxhighlighter-7.x-2.0两个模块解压到drupal\sites\all\modules\目录下

第二步:将ckeditor_4.4.5_full.zip放到上图中ckeditor文件夹里,解压到当前文件夹。当前文件夹中有一个ckeditor文件夹,压缩包中也是一个ckeditor文件夹,解压后的目录看图

 

Tags: