记忆盒子

fckeditor编辑器的工具条（toolbar）上默认没有“插入代码”的功能，为了更方便的发布文章，于是我就添加了这么一个功能图标。如下图所示：

“插入代码”的图标

下面详细介绍如何实现此功能，一共有三步。

据研究，实现方法与fckeditor版本有关，本文方法针对的版本是2.6.2，请先确定你使用的版本，可以用浏览器打开此文件来获取版本号：FCKeditor\editor\dialog\fck_about.html，注意不同版本的文件位置可能不同。

第一步

首先，请下载本文介绍的实例（点击下载），解压到 FCKeditor\editor\plugins 目录下，如图所示：

“插入代码”的文件

第二步

然后，打开 FCKeditor\fckconfig.js 这个文件，在

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;

下面添加一句：

FCKConfig.Plugins.Add('insertcode');

如图：

添加“'insertcode'”插件

再在 FCKConfig.ToolbarSets["Default"]  里添加 InsertCode ，如图：

在Toolbar显示“'insertcode'”插件

保存文件。

第三步

最后，打开文件 FCKeditor\editor\lang\zh-cn.js ，在后面添加一句：

InsertCodeBtn : "插入代码"

如图：

添加中文名称

这句话的作用是鼠标移到图标上时显示此中文。

保存文件。

至此，fckeditor添加一个插入代码的功能图标就完成了，由于缓存，可能要等一会才能在编辑器上显示该图标。

“插入代码”窗口设计

本实例“插入代码”的窗口如图所示：

插入代码的窗口

这个窗口的设计来自第一步中下载的那两个文件，各人可根据自己的需要进行修改。

本实例“插入代码”插入的html是这样的：

<p class="code">窗口输入的代码</p>

 即是为代码的P标签添加一个名为code的css类（注：下载实例仅作功能演示，并没有提供此css的样式代码）。

“插入代码”的图标文件位置在哪

“插入代码”的图标在 FCKeditor\editor\skins\default\fck_strip.gif 这个文件上选择，可通过修改本文下载的实例文件 fckplugin.js 设置图标位置，如本实例用的是从上到下次序为51的图标。代码如图：

“插入代码”的图标位置

广告

海外云主机

低至54元 - 可退款

立即选购 >

rxinyun

立即选购 >

标签: FCKeditor  

※ 网站速度慢？试试网站自动优化工具 ※