FCK编辑器(FCKEditor)添加新按钮和功能的修改方法(fxg编辑器)太疯狂了

随心笔谈2年前发布 编辑
168 0
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买


需要修改的文件:

fckconfig.js

zh-cn.js

en.js

fckeditorcode_gecko.js || fckeditorcode_ie.js(针对IE以外的浏览器||针对ie浏览器,如果要支持两种浏览器,就这两个包都修改)

第一步:在Toolbar中添加功能按钮

fckconfig.js:FCKConfig.ToolbarSets[“Default”] 中添加按钮名称

FCKConfig.ToolbarSets[“Default”]=[

[‘Bold’,’Italic’,’-‘,’About’, ‘mydiy’]

] ;

第二步:为按钮添加中文名称和英文名称

zh-cn.js:为你的按钮起个中文名字

mydiy : “我的自定义按钮”

en.js:为你的按钮起个英文名字

mydiy:”mydiybutton”

第三步:在Toolbar中显示该按钮

fckeditorcode_gecko.js(fckeditorcode_ie.js):

查找:

case ‘NewPage’:B=new FCKToolbarButton(‘NewPage’,FCKLang.NewPage,null,null,true,null,4);break;

在break后插入你的代码

比如case ‘mydiy’:B=new FCKToolbarButton(‘mydiy’,FCKLang.mydiy,null,null,false,true,50);(这个50是按钮的显示图片,要让你的自定义按钮显示为插入图片那个按钮的图片,可以填入37)

这样就可以在Toolbar中显示你的按钮了

第四步:定义按钮功能原型

ckeditorcode_gecko.js(fckeditorcode_ie.js):

查找:

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;};

定义功能原型:(这里直接复NewPage的实现代码放到后面,然后进行修改)

比如:var FCKmydiyCommand=function(){this.Name=’mydiy’;};FCKmydiyCommand.prototype.Execute=function(){ 这里写你所需要执行的代码或者函数,比如alert(“I am here !”);};FCKmydiyCommand.prototype.GetState=function(){return 0;};

将上面代码插入到查找内容之后。

第五步:按钮功能实例化:

ckeditorcode_gecko.js(fckeditorcode_ie.js):

查找:

case ‘NewPage’:B=new FCKNewPageCommand();break;

功能实例化:

case ‘mydiy’:B=new FCKmydiyCommand();break;

将上面代码插入到查找内容之后。

OK,这样就可以在为FCKeditor加上自定义的按钮了。

如果要为按钮加上快捷键,可以在fckconfig.js中:FCKConfig.Keystrokes=[]加上

[ CTRL + 71 , ‘mydiy’ ],

来自:萍客小居 (http://www.piikee.net/)

您可能感兴趣的文章:FCKeditor添加自定义按钮的方法FCKeditor添加自定义按钮CKEditor自定义按钮插入服务端图片

© 版权声明

相关文章