给Drupal打造近乎完美的在线所见即所得编辑器

一款好用的在线文本编辑器一直是博客作者，网文作者梦寐以求的创作工具，随着javascript技术的改进和各种文本编辑器的开发和升级，在线文本编辑器也逐渐的成熟和易用起来，本文将以现在较为流行的文本编辑器ckeditor和drupal模块来介绍在drupal网站上配置一款近乎完美的所见即所得的文字编辑和排版环境。

Top

需要的模块和第三方软件

首先介绍一下配置需要的模块和第三方的开源软件。使用的drupal模块wysiwyg, WYSIWYG Filter, IMCE , IMCE Wysiwyg bridge, GeSHi Filter for syntax highlighting, WYSIWYG - GeSHi bridge, 使用的第三方的软件主要就是ckeditor和geshi。

Top

drupal wysiwyg模块和CKEditor的安装与配置

首先安装并且启用wysiwyg，wysiwyg就是所见即所得(What You See Is What You Get)的简称。wysiwyg模块提供了众多和其他所见即所得编辑器的集成接口。已经默认支持了CKEditor, FCKeditor, jWysiwyg, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor, YUI editor 这些流行的编辑器，而且现在很多drupal的使用者和模块开发者也有意向支持这个统一的接口，所以本文就没有采用其他专门支持一种编辑器的模块来配置。打开wysiwyg配置界面，在下面的安装说明处“Installation instructions”可以看到wysiwyg对编辑器的支持情况。

默认的wysiwyg模块是不带任何编辑器的，本文由于是配置之后补写，所以这里的状态已经安装了Ckeditor。好让我们为wysiwyg安装Ckeditor。进入到你的站点的sites/all目录下，创建libraries目录，从网上下载ckeditor最新版并且解压缩。

 

1 2 3 4 5 6

cd sites/all/ mkdir libraries cd libraries/ wget http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.2.1/ckeditor_3.2.1.tar.gz tar zxvf ckeditor_3.2.1.tar.gz rm ckeditor_3.2.1.tar.gz

正确下载并且解压后，libraries目录里面会多一个ckeditor目录，所有的ckeditor文件都在这个目录下，我们可以删除下载的ckeditor_3.2.1.tar.gz这个压缩包了。 刷新你的wysiwyg配置页面，你会看到ckeditor已经被wysiwyg识别并且安装了。就像上面图片显示的一个对号，后面显示已经安装ckeditor的版本号。 接下来需要配置在哪个输入格式使用ckeditor，选择上面的Filtered HTML输入格式配置ckeditor编辑器，并且点击下面的保存按钮。

 

让我们把ckeditor的界面修改为中文显示，点击编辑按钮在基础设置那里，选择语言，在下拉项中设置为zh-cn。这样ckeditor就会使用中文显示界面了。

备注@1

经过这样简单的配置之后，你用filtered HTML这个输入格式创建一个node，就可以看到ckeditor已经被加载到页面上，你已经可以用它来编辑文档了。但是有一个不方便的地方就是你在文章中插入图片的时候，必须先上传图片到网络上，才能在ckeditor里面排版，能不能在ckeditor里面上传图片呢？当然可以。我们继续为ckeditor增加图片上传功能。

Top

配置wysiwyg CKEditor IMCE上传图片

Top

IMCE模块安装与配置

我们下载和启用drupal的IMCE模块，IMCE模块是基于javascript的应用，

是一个通用的文档管理模块，它可以方便的浏览，上传，删除服务器上的图片并且可以创建缩略图。IMCE是一个功能强大而且非常成熟的模块，很早就已经支持cck，也是使用最多的drupal模块之一，这里就不再做更多介绍。接下来简单的对IMCE进行配置，首先建立一个名为blog的配置文件，并且让注册用户默认使用blog配置文件。

并且在这个blog的配置里面设置每个用户的默认图片管理目录，我们使用u(uid)作为目录名称，用户1的目录就为u1，2的目录就是u2。配置的方法如下图所示。这样用户打开IMCE的图片管理界面时，默认就会进入到他自己的目录里面。

Top

IMCE与CKEditor整合

对IMCE进行简单的配置后，我们要把ckeditor和IMCE这两个功能整合起来，我们安装和启用IMCE Wysiwyg bridge 这个模块，这个模块已经做了整合，启用后，我们再次回到wysiwyg的配置页面，选择编辑Filter HTML的ckeditor的配置，在中间Buttons & Plugins的位置，可以看到多了一个IMCE的plugin。让我们选择这个plugin来启用它，并且找到Image这个button，也启用它。

保存之后，ckeditor的图片属性编辑界面中就增加了图片浏览和上传的功能。在你看到它们之前你需要清理一下drupal的缓存，甚至于你本地浏览器的缓存，确保你本地的ckeditor的js文件得到了更新。

点击这个按钮，就会打开IMCE的图片管理界面，上面有上传，删除，resize，缩略图，另外还多了一项“Send to ckeditor”。对就是这个，上传完图片选择一个图片后，点击这个链接，就可以把图片加入到ckeditor的图片编辑界面了，当然直接点击下面的图片预览也可以的。Ckeditor加入IMCE的图片管理功能，确实变得方便了很多。

Top

动动手，在CKEditor上传个图片并且排版

接下来请读者创建一个文章，并且上传一个图片，在ckeditor里面设置它的居右显示，

然后保存这篇文章。你会发现你的图片仍然是靠左显示的，如果你无法看到图片，那是因为你的Filtered HTML输入格式里面没有加入显示img。你可以手动加入，在站点配置->输入格式->Filtered HTML那里。

使图片标记img和div标记可以显示。

好，虽然我们加入了img的显示，但是图片仍然不能够居右显示。下面我来解释一下原因，其实问题就在HTML过滤器上，HTML过滤器是drupal核心自带的过滤器，出于安全上面的考虑HTML过滤器会过滤并且删除HTML标记里面的style等属性，如果非要图片支持style等css标记，那么必须将HTML过滤器停用，但是这样会给网站带来很大的安全隐患，因为不对用户提交的网页内容过滤，有可能不法用户会在网页里面挂入木马、病毒等有害内容，破坏网站和网站读者。为了让我们的网站更加安全，我们需要更多的配置来确保我们的编辑器的安全性，同时也要提供足够的强大的在线编辑功能来满足我们的网络作者。

Top

定制WYSIWYG Filter，让排版随心所欲

Top

WYSIWYG Filter简介

接下来我们安装启用WYSIWYG Filter这个模块，WYSIWYG Filter是专门为wysiwyg设计的一款网页代码过滤器，相较于HTML过滤器，它提供了强大的过滤功能和更加灵活的配置，能够对HTML标记，标记属性，标记值的有效性，自定义标记名称css类等进行严密的控制。WYSIWYG Filter会从你的网页中过滤掉任何不符合规则的内容，所以在配置WYSIWYG Filter的时候你要多注意尽量避免错误。

Top

过滤网页显示的内容

接下来我们继续配置Filtered HTML这个输入格式，

我们停止HTML过滤器，启用WYSIWYG Filter，并且为了避免冲突，我们也停止了换行转换器。

然后在设置那里对WYSIWYG Filter进行更加详细的配置，首先我对HTML elements and attributes进行了调整，加入了img对图片的支持，同时对img允许的属性也进行了配置，如src、style、width、height、title、alt，另外还对div标记加入了class和style属性，确保div可以用来配置css。由于这些配置在不同的网站上是不尽相同的，和你使用的drupal的模板有关系，所以我这里不一一讲述。下面是我的配置代码：

 

1 2 3 4 5 6

a[!href|target<_blank|title], div[align<center?justify?left?right|class|style], p[align<center?justify?left?right], br,span[style],em,strong,cite,code,blockquote,ul,ol,li[style],dl,dt,dd, img[src|style|width|height|title|alt], pre[class|style],table[class|style],tbody,tr[class],td[style]

 

大家需要注意的是没一行的配置结束要加上一个逗号，不然配置就不能正确解析。我说过配置的不正确会导致你网页内容的不显示，所以大家一定要小心。配置项中“!”开头的是必须值，每个属性之间用“|”来间隔，除了必须项外，其他都是可选属性，属性的值以“<”为开头标记，不同的属性值之间以“?”间隔。如果你配置了属性值，但是你的网页里面的值不在有效配置里面，那么你的这个属性就不会显示，所以说WYSIWYG Filter的过滤控制非常严格而且灵活。

Top

配置内嵌样式Style

接下来我们要对style这个内嵌的css属性编辑项进行更加详细的设置，

WYSIWYG Filter提供了一个列表来供我们选择都支持那些配置，我们需要按需要进行选择，比如要让图片能够居右显示，那么你至少要选择float这个配置项。

好了，保存配置，重新刷新一下你刚才编辑的那个带有图片的文章，看到了吧，现在图片已经可以靠右显示了。因为我们的WYSIWYG Filter中启用了img的支持，img里面可以设置内嵌的style样式，并且我们还配置了style样式里面支持float这个属性。从这个配置的例子可以看出，如果你为你的网络作者提供更加灵活的页面排版方式，那么你就需要仔细配置WYSIWYG Filter让这些配置能够生效并且正常显示。

至此我们的在线编辑器对普通文档的编排已经拥有了十分强大和灵活的功能了，但是对网络上面数量众多的代码、脚本和命令能够完美编辑和显示吗？目前还不可以，让我们来继续完善它。

Top

让代码语法高亮显示

Top

安装GeSHi Filter

安装和启用GeSHi Filter for syntax highlighting这个模块，在启动了这个模块后，我们仍然需要手动下载Geshi这个第三方的代码库来实现代码语法高亮显示的功能。注意我们下载的是1.0.x版本。

 

1 2 3

cd sites/all/modules/geshifilter/ wget http://sourceforge.net/projects/geshi/files/geshi/GeSHi%201.0.8.6/geshi-1.0.8.6.tar.gz/download tar zxvf geshi-1.0.8.6.tar.gz

 

Top

为代码加上行号

接下来我们修改下GeShi Filter的默认配置，首先加入行号的显示，然后启用Geshi对代码中的关键字加上链接。

然后选择我们网站支持那些种类代码的高亮显示，我选择了php, html, xml等，你可以根据自己的需要进行配置。

正确配置代码的标记可以使用Geshi filter自带的code或者blockcode。语言的区分用type、lang和language都可以。例如：

[code type="php"]your php code here...[/code]

之后，我们修改输入格式配置，在Filtered HTML这个格式中我们启用Geshi filter并且将它的优先级移到第一位。

Top

为代码加上色彩

这样配置后，GeSHi filter就已经可以处理位于code标记里面的代码了。但是显示的仍然不正常，原因在于WYSIWYG Filter的配置项没有包含GeSHi filter添加的css样式标记，并且将GeSHi filter生成的部分标记误删除。让我们把这些被删除的标记加上，根据不同配置标记也不相同，如果你不能确定，可以试着就使用我上面的配置代码。另外还要将GeSHi filter的css类名标记也加上。配置如下图(就在WYSIWYG Filter Style properties配置的下面，找不到？

经过以上的配置之后，各种代码语法高亮的显示就应该正常了。你可以试着在你的文章里面嵌入一段代码，由于CKEditor本身不支持GeShi的高亮显示，因此在它的界面上没有相应的按钮，你需要点击原始码，以代码的形式插入。

保存你的文档，显示一下，看看结果是不是代码已经按照你指定的语法高亮显示了？应该和这个差不多哦：

Top

复制代码时去掉行号

显示的问题解决了，有没有想过复制Ctrl-c、Ctrl-v也会有问题呢？在firefox等这些以gecko为引擎开发的浏览器上，复制时会连同行号一起复制过来。这样就给读者带来了很大的不便，一切为了读者考虑，我们继续来修正GeShi-filter的配置从根本上解决它，打开GeSHi-filter配置页面，将代码显示模式修改为 GESHI_HEADER_PRE_TABLE 保存后就可以了。GESHI_HEADER_PRE_TABLE将代码和行号使用表格将它们分在了两个不同的单元格里面，复制的时候就不会再有问题了。 

备注@2

Top

编写模块个性化CKEditor

Top

为什么要编写模块自定义CKEditor的配置

很多的编辑器都有自定义的功能，他们大多会提供一个js文件，让你通过编辑这个文件，达到自己配置编辑器的目的。Ckeditor也在自己的主目录中提供了一个叫做config.js的文件，在这个文件中，你可以定义Ckeditor的各种属性。不过在以wysiwyg模块集成的环境中，这个config.js文件里面的所有配置都无效了，原因在于wysiwyg打算将配置可视化，希望用户可以通过它提供的配置界面GUI来达到配置所有编辑器的目的。但是以现在wysiwyg版本所提供的配置功能还远远达不到对每个编辑器的数百个属性逐一进行配置的程度。所以wysiwyg的开发人员在6.x-2.1版本中引入了一个hook_wysiwyg_editor_config_alter方法，通过hook这个方法，让其他开发者可以对指定的编辑器进行配置。仅仅为了几个个性化的编辑器设置将以前只需在js中写几行代码就可以办到的事情搞的复杂起来，要编写模块才行，这么做有什么好处呢？其实还是有好处的，首先通过编写模块来配置，这样你就不需要修改编辑器目录中的任何文件，对升级是很有利的，你可以毫不犹豫的将旧版编辑器整个目录删除，再下载新版。另外编写的模块也独立于wysiwyg这个模块，所以当wysiwyg需要升级时，也可以直接删除wysiwyg目录。因此，编写一次模块，对今后的升级维护带来了很大的便利，我个人还是很赞同这种个性化的方式的。

Top

编写模块修正CKEditor的中文界面

我们来编写一个简单的配置模块来修正一下CKEditor的界面显示，让它能够正常显示中文。首先是写info文件，

ckeditor_custom.info

1 2 3 4 5 6

name = Ckedito custom setting description = Adds my custom setting to CKeditor via Wysiwyg module. package = User interface core = 6.x   dependencies[] = wysiwyg

 

然后编写module文件。

ckeditor_custom.module

1 2 3 4 5 6 7 8 9 10

/**    * Implementation of hook_wysiwyg_editor_settings_alter().    */   function ckeditor_custom_wysiwyg_editor_settings_alter(&$settings, &$context) {     if ($context['profile']->editor == 'ckeditor') {       $settings['uiColor'] = '#9AB8F3';       $settings['language'] = 'zh-cn';     }   }

在这个模块中，我们仅仅对另个设置进行了修改，一个是CkEditor的语言配置，设置成为中文，另外我们修改了一下CkEditor的背景色。这个模块很简单，不过你可以按照这个方法添加自己的设置。

备注@3

Top

编写CKEditor Plugin扩充编辑器功能

CKEditor有其自己的插件机制，允许开发人员编写插件来扩展功能，同样wysiwyg也提供了实现编辑器插件功能的接口，不同的是你仍然需要编写模块来实现wysiwyg的接口，在你的模块中加载js文件来实现插件功能。

Top

Teaser break插件浅析

待续

Top

利用插件修改编辑器设置

我们上面介绍过通过编写自定义模块实现wysiwyg的一个alter hook方法来设置编辑器，但是那个方法只能设置一些简单的类型，对于复杂的类型无能无力。但是我们仍然可以通过wysiwyg的插件接口来设置编辑器。原因在于插件其实核心是一个js文件，这样就避免了通过Drupal核心转换PHP变量到JS变量的过程，可以在这个文件中直接设置复杂的JS类型，比如我们下面配置的正则表达式。有的朋友可能会问既然我们编写了模块进行配置，为什么不能在我们的模块中直接加js文件来设置复杂的JS数据类型呢？这里涉及到一个js调用先后的问题，如果在自定义的模块中加入js进行配置，那么Drupal在生成页面的时候所有的js文件都会加载，你很难保证你的js文件能够在CKEditor和wysiwyg的js文件之后执行。这样你的设置就是没有效果的，而把设置代码放到wysiwyg的plugin接口中，就能保证你的设置代码是在CKEditor和wysiwyg初始化之后调用的，这样你的设置就会生效。

Top

设置代码保护功能避免CKEditor修改GeShi标记中的内容

我们这里就来设置一下CKEditor的一个配置项CKEDITOR.config.protectedSource，protectedSource是用来保护代码不会被修改，它是用正则表达式数组来设置的，所有正则表达式所匹配的内容将被保护，在用CKEditor进行编辑的过程中，CKEditor不会改动保护的内容。这个功能可以有效的保证我们用GeSHi标记的代码段不被CKEditor修改，如果不保护起来，之间的一些特殊字符和一些换行标记都会被CKEditor修改或者删除，导致代码段的格式面目全非。我们把保护设置附加到plugin的js的文件末尾。

 

1 2 3 4 5 6 7 8

CKEDITOR.config.protectedSource.push( /<\?[\s\S]*?\?>/g );   // PHP Code //CKEDITOR.config.protectedSource.push( /<%[\s\S]*?%>/g );   // ASP Code //CKEDITOR.config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi );   // ASP.Net Code //CKEDITOR.config.protectedSource.push( /<code[\s\S]*?<\/code>/g );  // GeshiFilter < code > CKEDITOR.config.protectedSource.push(/\[code[\s\S]*?\[\/code\]/g );  // GeshiFilter [ code ] //CKEDITOR.config.protectedSource.push( /<blockcode[\s\S]*?<\/blockcode>/g );  // GeshiFilter < blockcode > //CKEDITOR.config.protectedSource.push( /\[blockcode[\s\S]*?\[\/blockcode\]/g );  // GeshiFilter [ blockcode ] //CKEDITOR.config.protectedSource.push( /<pre\ .*?<\/pre>/g );    // wysiwyg-geshi

 

这样在CKEditor编辑的时候就可以在源码模式和可视编辑模式下面自由切换不必担心你设置的代码段会被改动了。

备注@4

Top

备注：

1. 由于wysiwyg的设计缺陷，目前CKEditor中文配置设置后无效果，可以通过编写模块自定义CKEditor配置来解决。返回
2. 因为将代码和行号分在不同单元格里面，当有的字体粗体和普通模式显示高度不一致时，会造成行号和代码的错位。代码中不少关键字是粗体显示，而行号都是普通字体，代码行会比行号略高一些，代码较多时，错位会增强，甚至错行。在IE中遇到。返回
3. 由于Drupal核心的限制详情见drupal_to_js，目前wysiwyg提供的这个alter方法只能对一些具有简单类型值的配置项进行设置，包括整形，布尔型，简单的字符串等。对于像用PHP字符串编写的js方法，js对象，正则表达式等无法支持。返回
4. Teaser break插件启用后，会意外修改被保护的代码。需要打个补丁来修正。 补丁下载地址 #Invalid XHTML: missing trailing slashes, absolute urls and uppercase tags 返回