当前位置: 代码迷 >> Web前端 >> FCKEditor自定义工具栏旋钮
  详细解决方案

FCKEditor自定义工具栏旋钮

热度:121   发布时间:2012-08-26 16:48:06.0
FCKEditor自定义工具栏按钮

项目需求要对FCKEditor进行修改,简化工具栏按钮,还有自定义工具栏按钮

一、简化工具栏按钮

??? 修改fckconfig.js文件中的FCKConfig.ToolbarSets["Default"]属性,在这个属性中,直接将要简化的功能按钮删除或者注视掉就OK,其他文件则不需要再修改,如果以后又需要这些功能,也可以直接再加上就可以使用。

二、自定义工具栏按钮

??在工具栏中新添加按钮,总共分三步(本人总结,非官方):1、定义按钮 2、将按钮注册到工具栏 3、对按钮写事件(即要执行啥操作),下面就以这三个步骤对自定义工具栏以及事件编写进行一下介绍

?

? 1>、首先修改fckconfig.js文件中的FCKConfig.ToolbarSets["Default"]属性,对要添加的按钮起一个英文的名字,在属性中添加,注意中间要以逗号隔开,然后修改en.js和zh-cn.js两个文件,在FCKLang属性中添加按钮信息,比如,在支持英文的en.js文件中添加Sign:'Sign',在支持中文的zh-cn.js文件中添加Sign:'签名',其中Sign就是我们要添加的按钮的名称,而签名就是我们放在这个按钮上的时候显示的提示信息,比如这个就是个签名按钮。

? 2>、以上定义完按钮之后,第二步就是将按钮注册到工具栏当中。

????? 修改fckeditorcode_gecko.js和fckeditorcode_ie.js两个文件,其中gecko支持firefox之类、ie是支持IE浏览器的js文件。虽然这两个文件支持浏览器不同,但是基本修改的时候其实都差不多,所以一下步骤所要修改的地方,基本上都一样,所以两个文件合做一个来说。

??????????????? 在这两个文件当中搜索InsertHorizontalRule,按照前面的规则,添加定义的按钮名称如Sign,中间以竖杠隔开,然后搜索case 'NewPage':B=new FCKNewPageCommand();break;在这之后添加case'Sign':B=new FCKSignCommand('Sign',FCKLang.Sign,null,null,true,null,67);break;其中的67就是我们这个自定义的按钮上要显示的图片在fck自带图片库中的序列

?

?

?

然后搜索default:if (FCKRegexL,在这串只前添加case 'Sign':B=new FCKToolbarButton('Sign',FCKLang.Sign,null,null,false,true,67);到此按钮注册完成,下面是对此按钮注册事件

在此文件中搜索var FCKNewPageCommand=function(){this.Name='NewPage';};FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetData('');FCKUndo.Typing=true;FCK.Focus();};FCKNewPageCommand.prototype.GetState=function(){return 0;};在这个在的后面添加

var FCKSignCommand=function(){this.Name='Sign';};FCKSignCommand.prototype.Execute=function(){getUserSign()};FCKSignCommand.prototype.GetState=function(){return 0;};

其中getUserSign()就是本例中要执行操作的方法名

??? 3>、对功能事件编写代码(即编写getUserSign()方法)

function getUserSign(){ str={"sign":"1"}; $.ajax({ url:"http://localhost:80/sysNews/queryUserSign.action", dataType:"json", type:"post", data:str, success:function(data){ FCKUndo.SaveUndoStep();var oImg = FCK.InsertElement( 'img' ) ;oImg.src = "http://localhost:80/common/fckeditor/editor/images/userSigns/"+data.sign+".gif" ; } }); }


?由于在js文件当中无法直接获取从系统传来的参数,所以我们使用了一个jquery的ajax异步请求,从系统中获取用户登录名,然后在写死的路径当中寻找匹配的图片进行添加

在js文件中同样无法直接加载jquery的js库,所以我们使用

?

var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src="jquery-1.4.2.js";


?来进行jquery的添加,至此功能开发完毕,刷新页面,在FCKEditor页面应该多了一个按钮,将鼠标放上去会提示“签名”,点击会自动获取当前登录人的信息,然后将匹配签名图片添加到FCKEditor编辑器中

-------以上仅为本人本例开发过程,非官方

?

  相关解决方案