用 FCKeditor 为 Joomla 打造超级“所见即所得”编辑器

有谁用着 Joomla 而不使用“所见即所得”编辑器呢？但是，你对你正在使用的编辑器满意吗？不要急着回答，请首先看看下面的插图。这是我使用一款新编辑器撰写的文章的前台效果，这里只展示了其中两个功能：自定义中文字体和代码高亮显示。

或许你也能实现这个效果，但是我可以肯定你的编辑器没有这么方便：我这个“自定义字体”在后台操作时就像使用 Microsoft Office Word 一样，直接在“字体”下拉列表中选择想要的字体即可；而展示程序代码的功能就更牛了！用户无需切换到 HTML 模式，也无需使用 [code] 这样的特别标记，直接点击“插入程序代码”按钮，然后在弹出的对话框里面粘贴程序源代码即可。更酷的是，这个代码展示功能可以指定代码的起始行号，前台还 有“复制代码”按钮。

当然了，这一款新编辑器还有其它更多的改进，你感兴趣的话，请继续阅读。

Super Joomla WYSIWYG editor

新型 FCKeditor 编辑器功能简介

我们来看看这款编辑器的操作界面：

JCK Patched editor toolbar

没错，你大概已经注意到了，这个界面与 JoomlaFCK 编辑器几乎一样，因为这款新编辑器也是采用 FCKeditor 作为核心的 —— 看看文章标题就知道了。

如果你从上面的主界面还看不出有什么特别，那么下面我分别用截图简单介绍一下几个新增的功能：

1、增强的图片浏览（AJAX File & Image Manager）

请仔细看下面两张图，上面是标准的 FCKeditor 编辑器在插入图像时点击“浏览服务器”按钮后所弹出的对话框，下面是 Joomla 之门新改造的编辑器的同等功能画面：

JoomlaFCK File & Image Manager

AJAX File & Image Manager

可以看出，新编辑器在“浏览服务器”时，不仅可以显示图像的缩略图，而且带有搜索功能。点击缩略图时，能够以 LightBox 弹出效果展示大图。当然了，顶部还有一排功能按钮：刷新、全选、删除、剪切、复制、粘贴、新建文件夹、上传，你还能要求什么呢？

顺便说一下，这个新的文件管理器是 AJAX 驱动的，意味着速度更快！

2、手绘 ImageMap

ImageMap 这个词还不太好翻译，简单说就是在一张图片上勾勒出几个区域，分别链接到其它位置。常见的例子是：显示一张中国地图，点击北京市区域，就链接到北京市区图；点击云南省区域，就链接到云南省地图；…… 同样的原理也可以用来做产品展示：例如某种新型战机，点击机翼就链接到机翼的资料，点击引擎就链接到引擎的资料，等等。

以往制作 ImageMap 时最痛苦的就是寻找热区（hotspot）的坐标，尤其是像地图这种不规则区域。

现在，我们新型的编辑器上自带一个插件，点击按钮之后，用户就可以拖动鼠标勾画热区的轮廓，插件自动记录周线的各点坐标，是不是很方便呢？

outline your ImageMap by mouse

3、增强的“特殊字符”

如果你点击 JoomlaFCK 编辑器上的“插入特殊字符”按钮，你能看到多少个特殊字符呢？请看下图：

special characters in JoomlaFCK editor

假设我现在要向文章中插入一个 〒 符号，似乎从上图中找不到？但是在新的编辑器中，“特殊字符”的范围扩大了，点击“单位”就能找到这个符号：

special characters in JCK Patched editor

4、不用记忆经纬度就插入谷歌地图

一般网站的文章中很少需要插入地图，但是对于“户外”、“旅游”相关的网站来说，可能经常需要在文章里面展示地图。谷歌地图现在已经是大家公认的最佳方案。但是在 Joomla 的文章里面插入谷歌地图还有点不容易。首先你必须找出要展示的地理位置的经纬度，然后还要给 Joomla 安装上 Google Maps 插件，然后在文章中要用特殊的标记语法输入一些代码 —— 一个字，累！

现在请看看下图，这是我们新编辑器中插入谷歌地图的对话框。你无需记忆经纬度（如果你记得住也可以直接输入坐标），只需用鼠标拖动地图，找到你要的位置，然后选择缩放级别、尺寸等参数，最后点击“确定”就能在文章中插入一幅地图。不需要安装其它任何插件，也无需记忆任何特殊标记语法！

Insert Google Map into your article

当然了，你还是要为你的网站申请一个 Google Map API Key 的。在安装了本编辑器之后，就要用你自己的 API Key 来替换我们预设的 Key，具体设置方法将来会在编辑器的下载页面上说明。 

 5、在 WYSIWYG 状态下插入程序源代码用于前台展示

很多程序员都需要在博客或教程文章中展示一些程序代码。HTML 语言本身就有一个 <pre>元素用来展示源代码，但是这个功能太弱了！谁不希望自己的代码能够自动被加上“语法高亮”（Syntax Highlight）？如果还能增加“自定义起始行号”和“复制代码到剪切板”功能，你能不喜欢吗？

但是这个功能以前在 Joomla 中几乎无法实现！我从两年多以前就期盼这样一个插件，今天终于完美解决了！

也曾经有人开发过一些用来展示程序源代码的插件，但是几乎都要求用户切换到编辑器的 HTML 模式下操作，或者要求使用 [code] 这样的特殊标记，…… 总之，不方便！

下面看看我们新编辑器的“插入程序代码”功能：点击按钮后，可以自己选择所插入代码的语言种类，默认是 php；然后你能选择是否显示“复制代码”等工具条，是否显示行号，以及自定义起始行号。

而这一切，都是在 WYSIWYG 状态下完成，在对话框里面粘贴并选择即可。从此跟 HTML 模式说拜拜！

Insert Code with pop-up Dialog

Customize code line number of your first line

注意看上面参数中有一个“折叠”，意思是可以让代码在前台一开始折叠起来，读者需要点击“展开”按钮才能看到全部代码区块！

6、转载文章时将外部网站的图片自动保存到站内空间 

很多“懒人”转载其他网站文章时，都是复制、粘贴、保存，几乎很少进行二次编辑。这就留下一个隐患：如果文章中含有插图，那么直接粘贴的内容里面图片还是链接到外部网站。假如该网站删除了那篇文章；或者改变了图片；或者禁止链接图片（163的网上相册似乎就是这样），那么你的文章在前台就无法正常显示这些图片。

还有一种情况不得不考虑：你的 Joomla 网站只是一个“内部网”（Intranet），没有与互联网（Internet）连接。网管可能从外网复制了一篇文章，想让内网用户都欣赏一下，但是内网用户却发现图片都不能显示。原因就是这些图片都是链接到外部网站的，内网无法访问外网，就无法显示图片了。

我们这个新编辑器增加的“自动保存站外图片”的功能，就是为了解决这个问题。其工作模式是：

当你将转载的图文内容粘贴到编辑器中之后，图片是链接到外部的；这时不要急于点击“保存”，而是点击编辑器工具栏上的“保存远程文件”按钮，然后就能看到一个弹出窗口，显示了自动探测到的所有站外图片（文件）：

Save external images to your website server folder

接下来点击“保存到本地”，就能将该文章中所有的外部图片都保存到站内的指定目录，同时完成“用站内链接替换原来的外部图片链接 URL”转换过程。最后显示成功消息。这时候再点击“保存”按钮，完成文章编辑。

请注意：这个功能目前还有一些不足，下一页将具体讨论。

7、插入一段 HTML 代码并执行

请注意：这里讲的“插入 HTML 代码”与上面的“插入程序源代码”不同，前面说的是要展示一段代码给前台访客，让他们直接看到源代码；这个功能则是插入一段 HTML 代码并执行，在前台展示其运行结果。

如果你不太明白这个功能的意义，我们举例来说吧。很多开源作者都需要在某篇文章中插入自己的 PayPal 捐款按钮，而 PayPal 官方推荐的做法是：将捐款按钮的源代码加密，以免被黑客篡改，或者帐号被恶意收集（PayPal 帐号本身也是 email 帐号）。PayPal 官方为用户自动生成一段代码，用户必须将这段 HTML 代码插入到文章的源代码里面去，最终在浏览器中运行后的结果就是显示一个 PayPal 捐款按钮。很显然，如果你正在用“所见即所得”编辑器撰写文章，在插入这个捐款按钮时就需要切换到 Non-WYSIWYG 模式，颇为不爽。

我们给 JCK Patched 编辑器增加了这个新功能：你不必切换到 HTML 模式，直接点击按钮，在对话框中输入要运行的 HTML 源代码，点击确定，这段代码就会被执行，在文章中显示出运行结果。如下图所示：

Insert HTML code and Run it

我们预定义了一段代码，你完全可以删除它，然后输入自己的代码，例如上图中右侧的乱码，那就是被加密过的 PayPal 捐款按钮源代码。当点击“确定”按钮后，文章中出现的不是这些乱码，而是执行后的结果：一个 Paypal 捐款按钮。

如果你不需要插入 Paypal 按钮就不需要这个功能了吗？错！上面只是一个例子，本功能可以插入任何需要执行的 HTML 代码，例如 Google Adsense 广告代码，或者其它任何小程序（snippet）。你当然还能将那个预设代码修改为你经常需要插入到文章中的一段 HTML 代码。

这个页面似乎有点长了？但是功能还在增加，因此我们再增加一个页面吧。请您继续阅读 ----> 

下载 JCK Patched for J1.5 超级所见即所得编辑器插件 2.6.5 beta1 多国语言版

文件标题: JCK Patched for J1.5 超级所见即所得编辑器插件 2.6.5 beta1 多国语言版 (Details) 文件类型: zip 版本: 2.6.5 beta1 文件大小: 2.77 MB