linfan's blog

打造完美的Drupal编辑器

一个Octopress架设的博客，怎么上来就是一篇Drupal的文章呢？很简单，本来是打算用Drupal来架设个人博客的，结果在上线前发现了Octopress，于是叛逃了 :) 。尽管不再使用Drupal，但安装Drupal过程中的一些经验还是值得记录与分享的。

言归正传，Drupal预设的编辑器过于简陋，而我当时对“完美”的定义是：可视化、图像上传、代码高亮，并且使用 CKEditor + IMCE + SyntaxHighlighter 实现了预期目标。以下是安装过程，基于Drupal 7环境。

安装CKEditor

CKEditor是最好的在线HTML编辑器之一，也是将要实现的Drupal编辑器的核心组成部分。

下载CKEditor 3.6 for Drupal 7并在Drupal模块管理界面中安装（也可直接通过URL安装）。启用CKEditor，此时Drupal已经有了一个不错的所见即所得编辑器。

安装IMCE

IMCE是一个文件管理器，用于实现图像文件的上传。其实，CKEditor本身就捆绑了一个非常好的文件管理器CKFinder，但CKFinder是收费软件（CKEditor是免费/收费双重授权的，我们使用其免费授权），故使用免费的IMCE进行替换，本文也不讨论CKFinder的配置。

下载IMCE，安装并启用。

进入CKEditor的配置页面，编辑Advanced配置档案，展开FILE BROWSER SETTINGS，可以看到File browser type设置为CKFinder，将其修改为IMCE。按同样方法修改Full配置档案。

代码高亮

到目前为止，Drupal编辑器已经基本成型了，可以应付绝大部分的编辑需要。不过作为 酷毙 苦逼的码农，怎么能缺少代码高亮功能呢。

代码高亮可以通过SyntaxHighlighter实现，并且只支持Full HTML文本格式。相对于CKEditor和IMCE，这个东东的安装会复杂一些，慢慢道来。

1. 下载SyntaxHighlighter，解压到sites/all/libraries目录下（新安装的Drupal是没有这个目录的，需要手工创建）。为什么不在模块管理界面中安装呢，因为这只是一个Javascript库，不是Drupal模块。

2. 下载SyntaxHighlighter的Drupal模块，安装并启用。

3. 进入SyntaxHighlighter的配置页面，勾选需要支持的语言，保存设置。注意：不要修改代码使用的标签名称，因为之后安装的某个插件只识别默认的<pre>标签。

4. 进入文本格式的配置页面，编辑Full HTML格式，在启用过滤器分组中勾选Syntax highlighter，并在过滤器处理顺序中将其置为第一个；取消选择将换行符号转换为HTML，否则代码换行处会插入<br>标签。保存设置。

OK，现在新建一篇文章，选择格式为Full HTML，点击CKEditor工具栏左上的Source按钮切换到源文件模式，输入以下内容，预览一下，是不是已经可以显示代码高亮了？

1
2
3
4
5
6
7

<code class="brush:cpp">
int main(int argc, char **argv)
{
    printf("Hello, World!\n");
    return 0;
}
</code>

让CKEditor支持代码高亮

这样显然不够，虽然实现了代码高亮显示，但怎样才能在CKEditor中直接输入代码呢？我们需要安装一个叫做ckeditor-syntaxhighlight的插件。

1. 下载ckeditor-syntaxhighlight，将其中的ckeditor-syntaxhighlight/plugins/syntaxhighlight解压到sites/all/modules/ckeditor/ckeditor/plugins目录下。

2. 编辑sites/all/modules/ckeditor/includes/ckeditor.lib.inc文件，在ckeditor_load_plugins函数的CKEditor build-in plugins段中加入以下代码。

1
2
3
4
5
6
7
8
9
10

if (file_exists($_editor_path . 'plugins/syntaxhighlight/plugin.js'))
{
    $arr['syntaxhighlight'] = array
    (
        'name' => 'syntaxhighlight',
        'desc' => t('Syntaxhighlight plugin'),
        'path' => $base_path . $editor_path . 'plugins/syntaxhighlight/',
        'default' => 'f'
    );
}

3. 编辑sites/all/modules/ckeditor/ckeditor.config.js文件，在Drupal.settings.cke_toolbar_DrupalFull数组的最后加入'Code'，即数组内容的最后一行修改为['DrupalBreak', 'DrupalPageBreak', 'Code']，保存。

4. 进入CKEditor的配置页面，编辑Full配置档案，展开EDITOR APPEARANCE，在Plugins分组中勾选Syntaxhighlight plugin，保存设置。

好了，新建一篇Full HTML格式的文章，看看CKEditor工具栏上最后一排是不是新增了一个code按钮，点击一下看看。如果看不到新增的按钮，在CKEditor的Full配置中，展开EDITOR APPEARANCE，在工具栏分组中，重新Load sample toolbar: Full，保存设置。

大功告成！

题外话

如果你是一名程序员，不排斥控制台操作方式，并且只想简简单单地写一写博客，强烈推荐Octopress，个中好处请自行Google之。

Comments