记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

fckeditor添加一个插入代码的功能图标

作者:Kaka    时间:2017-3-23 23:29:26    浏览:    评论:0

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'”插件

添加“'insertcode'”插件

再在 FCKConfig.ToolbarSets["Default"]  里添加 InsertCode ,如图:

在Toolbar显示“'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的图标。代码如图:

“插入代码”的图标位置

“插入代码”的图标位置

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: WordPress速度慢?试试Wp Super Cache缓存插件
下一篇: 判断WP Super Cache是否缓存成功的两个方法

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009 All Rights Reserved.