【Drupal】简化 WYSIWYG 编辑器的图片上传操作

虽然 Drupal WYSIWYG 所见即所得模块非常之强大，为超过 10 种流行的网页编辑器提供与 Drupal 结合的中间层，但其实很多时候我发现项目站点的需求并没有那么多，很多时候我们只需要一个简单的网页编辑器加上简单的图片或文件上传功能即可，但在 Drupal 中似乎并不容易实现这些需求，出于安全等因素的考虑多数编辑器如 FckEditor TinyMCE 等其图片上传工作除 WYSISYG 模块外还需要 IMCE 模块来提供中间层支持，而 IMCE 繁琐的上传步骤不单让我们自己头疼也使绝大多数用户在使用 IMCE 上传图片时觉得繁琐，我自己粗略回忆一下至少还需要约 8 次鼠标点击才能在编辑器里面看到上传的图片这是非常不利于用户体验的，下面提供一些方法和代码可以大大减少上传图片的点击步骤简化上传图片和文件的操作

下面提供的方法仅针对 Drupal 5.x 另外对于 Drupal 6.x 可使用新版的 ckEditor 做类似修改也很容易实现，另外下文提到的 fckEditor 模块是指从 drupal.org 下载的模块文件而 fckEditor 编辑器是指从 ckEditor.com 下载的编辑器文件，读者需要仔细阅读区分：

1、下载模块：如果项目中只需要一种编辑器就足够，而且也并不需要 IMCE 来管理每个用户的文件，我们就可以不使用 WYSIWYG IMCE 这两个功能过于强大的模块了，只需要下载并启用 fckEditor 一个模块即可，具体安装方法不再详述在 fckEditor module for drupal 这里有详细的描写，要点是要将下载的 fckEditor 编辑器放置到相应 fckEditor module 模块目录之下，然后就可以进行下面的修改操作了；

2、开启上传：默认的 fckEditor 模块需要搭配 IMCE 才可以实现图片的上传功能，这里需要做一些修改来开启 fckEditor 编辑器内置的 FileManager 来负责上传操作从而代替 IMCE 模块，具体修改方法在 fckEditor 模块下面的 README.txt 也有详细的说明我这里简单翻译一下要点步骤。在编辑器中的 /modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php 文件中添加一句代码 require_once “../../../../../filemanager.config.php”; 加到最前面即可然后设置该文件后面的 $Config[‘Enabled’]=true; 还要设置 $Config[‘UserFilesAbsolutePath’]=’files’ 该值为你的文件上传目录对于 Drupal5 通常是 files 需要注意是该目录为相对于站点根路径的目录，修改之后即可在 Drupal 的 admin/settings/fckeditor 中配置 file browser settings 了非常方便；

3、优化交互：照上面修改之后就可以只使用 fckEditor 一个模块来负责编辑器和文件上传功能，但我的用户在使用之后仍然觉得有些繁琐体现在，多数情况下用户都在上传新的图片，而点击编辑器的图片按钮出现的却是“图像属性”和“浏览服务器”上传功能，这会无形中引导用户走向类似 IMCE 的操作方式（看这里）所以最简单的修改是将“上传”选项卡移至首选功能具体需要修改 fck_image.js 文件中将 dialog.AddTab(‘Upload’,FCKLang.DlgLnkUpload) 连同前面的 if 语句拿到 dialog.AddTab(‘Info’,FCKLang.DlgImgInfoTab) 语句之前然后在后面的 window.onload 函数中写入一句 OnDialogTabChange(‘Upload’) 即可实现窗口启动时自动切换到“文件上传”功能以减少点击和误导，具体文件位置比较深自己搜索一下；

4、再次优化：如此修改之后上传文件已经变的相对容易了，但有用户仍反应是否可以在选择文件之后直接触发上传而不用再点“上传到服务器”呢我估计是受了 swfUpload 的影响，当然这也很容易解决需要修改上面同一位置的 fck_image.html 文件中文件选择框 input id=”txtUploadFile” onChange=”document.getElementById(‘btnUpload’).click()” 添加一个事件即可具体是在 file 选取之后由程序触发上传按钮，当然事件改为 this.form.submit() 也是可以的，但那样就没有上传动画了。

5、进阶优化：经过上面这些修改已经基本可以满足目前我的用户需求了，但这里其实可以拓展一下例如还可以将 upload 表单和 image info 表单放到同一个弹出层里面类似腾讯在某些页面的编辑器，这样就可以一劳永逸的解决所有问题，我这里就不提供修改方法了读者可以自己摸索一下。

开源程序的优点就是他的任何内容你都可以看到并可以根据自己的需求修改，这也是我喜欢 HTML CSS JavaScript 喜欢 Drupal WordPress 的原因之一，我知道有人会觉得 Image Assist 模块也会比较容易上传但 Image Assist 每上传会占用一个新的 node 这与 WordPress 的上传机制类似，我个人并不太喜欢，如果你有其他更高明的方法欢迎分享一下！！