直接修改fckeditorcode_gecko.js,fckeditorcode_ie.js文件扩展fckeditor自定义工具栏按钮

  由于要插入客户广告,所以需要扩展fckeditor的自定义功能,具体原理可以参考这篇文章。扩展Fckeditor工具条--添加自定义功能按钮。不过修改的是源代码,然后再重新打包压缩。我是懒得再打包了,而且文章里面也没打包成功。
  所以干脆直接修改打包压缩过的js文件fckeditorcode_gecko.js【非IE浏览器,如果不需要兼容非IE浏览器就不需要修改这个文件了】,fckeditorcode_ie.js【For IE】算了,原理也是差不多的,只是fckeditorcode_gecko.js,fckeditorcode_ie.js代码压缩过,看起来比较吃力,不过知道原理以后,添加起来很简单。
  修改步骤如下
第一步,修改fckconfig.js,添加功能“InsertAD”。
+展开
-JavaScript
FCKConfig.ToolbarSets["Default"] = [
 ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
 ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
 '/',
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink','Anchor'],
 ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
 '/',
 ['Style','FontFormat','FontName','FontSize'],
 ['TextColor','BGColor'],
 ['FitWindow''ShowBlocks''-''About''-''InsertAD'/*功能按钮插入在最后* /]
] ;

第二步,添加语言配置,打开zh-cn.js,添加功能配置说明
+展开
-JavaScript
InsertAD            : "插入客户广告"

备注:下面的步骤主要修改fckeditorcode_gecko.js,fckeditorcode_ie.js的修改和修改fckeditorcode_gecko.js一样。

第三步,添加“InsertAD”功能事件。
用记事本打开fckeditorcode_gecko.js,查找“'About'”,第一次会查找到添加事件的代码行,如下
case 'About':B=new FCKDialogCommand('About',FCKLang.About,'dialog/fck_about.html',420,330,function(){ return 0;});break;
只要照葫芦画瓢,拷贝上面的代码,然后粘贴在这个语句前面或者后面都可以,然后修改一些参数。
FCKDialogCommand类是构造打开对话框的,定义如下
var FCKDialogCommand = function( name, title, url, width, height, getStateFunction, getStateParam, customValue )
第一个:对应的fckconfig.js插入的功能名称
第二个:对话框的标题,配置文件中定义,参考第二步
第三个:对话框加载的页面,自己将对应的文件放在editor/dialog下面,文件内容参考扩展Fckeditor工具条--添加自定义功能按钮介绍的
第四个和第五个:对话框的长和宽
第五个以后我也不清楚
最后修改后的代码如下
+展开
-JavaScript
case 'InsertAD':B=new FCKDialogCommand('InsertAD',FCKLang.InsertAD,'dialog/insertad.aspx',450,300);break;
case 'About':B=new FCKDialogCommand('About',FCKLang.About,'dialog/fck_about.html',420,330,function(){ return 0;});break;

第四步,添加“InsertAD”按钮到工具栏里面
在原来的位置上查找“'about'”,直到找到如下面的语句
case 'About':B=new FCKToolbarButton('About',FCKLang.About,null,null,true,null,47);break;
按照第三步的操作,拷贝,粘贴,修改一些内容,结果如下,由于传递了null,所以要在skin对应的皮肤里面建立toolbar,然后放入insertad.gif即可。
+展开
-JavaScript
case 'InsertAD': B = new FCKToolbarButton('InsertAD', FCKLang.InsertAD, FCKLang.InsertAD, nullfalsetruenull); 
break;case 'About':B=new FCKToolbarButton('About',FCKLang.About,null,null,true,null,47);break;


刷新页面看下效果~~,自定义的插入客户广告的“insertAD”就在fckeditor的工具栏里面出现了,如下,最后就是自己修改插入广告的页面的功能了。
扩展fckeditor自定义工具栏按钮

加支付宝好友偷能量挖...


原创文章,转载请注明出处:直接修改fckeditorcode_gecko.js,fckeditorcode_ie.js文件扩展fckeditor自定义工具栏按钮

评论(0)Web开发网
阅读(236)喜欢(0)JavaScript/Ajax开发技巧