• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >网页编辑器 > FCKeditor添加自定义按钮的方法

FCKeditor添加自定义按钮的方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-06-05

本文主要包含fckeditor,fckeditor使用方法,fckeditor官网,fckeditor下载,fckeditor漏洞等相关知识, 希望在学习及工作中可以帮助到您
增加按钮有以下几步:

1、为按钮增加图片:
FCK的所有按钮图片是存放在一个图片文件里的,这一点比较独特,文件存放在相应皮肤目录下,如:/FCK/skins/silever/fck_strip.gif。通过Fireworks或Phtoshop打开该文件可以发现一个很长的图片,里面包含所有按钮的图片,现在您可以在该图片的最下面增加您自定义的按钮,注意,每个按钮的尺寸是16*16px。

2、为按钮增加功能代码:
增加按钮需要对FCK/editor/js目录中的两个核心文件进行修改:fckeditorcode_gecko.js和fckeditorcode_ie.js,前者是使用于gecko核心的浏览器如Firefox等,而后者应用于以IE为核心的浏览器如MyIE(傲游)等,这两个文件大体是相似的,仅有微小差别,在此我们基本无须担心。
修改的方法非常简单,基本是一个照葫芦画瓢的过程,首先我们找一个与我们将要添加的按钮功能相似的一个按钮,这里我们选择了Newpage,这是一个清空编辑器以备新建一个文件的按钮。首先我们修改fckeditorcode_ie.js,fckeditorcode_gecko.js直接复制更改的代码就可以了。

打开fckeditorcode_ie.js,这里需要说明的是,fckeditorcode_ie.js是多个文件合并经过代码优化的(即去掉了大部分换行、空格、注释等)不是很容易阅读,而且这样一百多K的JS文件用Dreamweaver、ZDE等工具打开后CPU立刻升至100%,相信计算机就变成痴呆一样了,经过一翻比较,发现曾被我认为一文不值的Golive竟然可以轻松打开该文件并快速编辑!不管你用什么软件反正能打开并编辑就行了。以关键词Newpage进行查找,你会发现一个按钮的功能定义分三大部分:

A、功能原型
// 按钮功能原型
var FCKNewPageCommand=function(){this.Name='NewPage';};
FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};

var FCKMyAlbumCommand=function(){this.Name='DISPLAY: none';};
FCKMyAlbumCommand.prototype.Execute=function(){if(typeof(parent.showMyAlbum)=="function"){parent.showMyAlbum(FCK);}else{alert(FCKLang.NoAlbum);}};
FCKMyAlbumCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};

B、功能的实例化
case 'NewPage':B=new FCKNewPageCommand();break;
case 'MyAlbum':B=new FCKMyAlbumCommand();break;

C、按钮的显示
case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;
case 'MyAlbum':B=new FCKToolbarButton('MyAlbum',FCKLang.MyAlbum,null,null,true,null,67);break;

上面代码中第一部分是Newpage的原代码,后一部分是我们自定义的代码,您一看应该明白怎么回事了吧?仅红色部分和名称不同而已!而红色部分就是我们的自定义功能。
FCKLang是语言包对象,您只要打开FCK/editor/lang/下面的相应语言包添加相应的名称属性就可以了,比如:MyAlbum打开我的像册。注意大小写!至此我们的添加工作已完成。 </div>

您可能想查找下面的文章:

  • 解决FCKEditor在IE10、IE11下的不兼容问题
  • fckeditor编辑器下的自定义分页符实现方法
  • 针对PHP环境下Fckeditor编辑器上传图片配置详细教程
  • FCKeditor编辑器添加图片上传功能及图片路径问题解决方法
  • ie9后浏览器fckeditor无法上传图片、弹出浮层内容不显示的解决方法
  • FCKeditor 在chrome中不显示问题
  • ajax php实现给fckeditor文本编辑器增加图片删除功能
  • Fckeditor XML Request error:internal server error (500) 解决方法小结
  • FCKeditor smarty 编辑器的应用PHP
  • ThinkPHP中FCKeditor编辑器的使用方法

相关文章

  • 2017-06-05百度编辑器ueditor前台代码高亮无法自动换行解决方法
  • 2017-06-05FCKEditor 自定义用户目录的修改步骤 (附源码)
  • 2017-06-05autogrow 让FCKeditor高度随内容增加的插件
  • 2017-06-05php UEditor百度编辑器安装与使用方法分享
  • 2017-06-05ueditor1.2.1修改超链接默认值,ueditor编辑器新窗口打开连接
  • 2017-06-05TinyMCE syntaxhl插入代码后换行的修改方法
  • 2017-06-05ckeditor的使用和配置方法分享
  • 2017-06-05FCKeditor 图片上传进度条不动的解决方法
  • 2017-06-05让谷歌浏览器Google Chrome支持eWebEditor的方法
  • 2017-06-05FCK编辑器(FCKEditor)添加新按钮和功能的修改方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • FCKeditor 图片上传进度条不动的解决方法
    • CKeditor与syntaxhighlight打造joomla代码高亮
    • 整合ckeditor+ckfinder,解决上传文件路径问题
    • CuteEditor 编辑器的字体样式无法控制的解决方法
    • FCKeditor 网页在线编辑器的使用方法
    • php UEditor百度编辑器安装与使用方法分享
    • ajax php实现给fckeditor文本编辑器增加图片删除功能
    • 关于jsp版ueditor1.2.5的部分问题解决(上传图片失败)
    • 百度ueditor组件上传图片后如何设置img里的alt属性
    • fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有