zss1100
爱就要负责
posts - 9,  comments - 35,  trackbacks - 7

在此文开始之前,本人用了一天时间研究了在FCKeditor中添加自定义工具栏(咋感觉自己比较笨呢?)。之前,网上有很多人也在找这样的资料,但是都没有详细说明。终于,偶然情况下,发现了两位高人的BLOG中有提及怎样添加自定义工具栏,但是没有插入代码这功能的代码。不过,站在巨人肩膀上就是爽啊,慢慢改。

 

  文章开始前,把两位达人的BLOG先发出来:

 

清清泡泡http://j2ee.blog.sohu.com/36813753.html(详细讲解了如何添加自定义工具栏,可是很多都是不需要的步骤)
幻想曲http://www.lemongtree.com/Archives/fckedit_toolbar.aspx
http://www.lemongtree.com/Archives/fckeditor_toolbar_2.aspx
(只给了源码没说明,= =!源码地址在16楼的回复里)

 

另外,插入代码功能的JS脚本是用了 月伤 melody  制作的双鱼文本编辑器 PiscesTextEditor V1.0中的脚本,要特别感谢!

作品链接:http://www.2fstory.net/blog/View.aspx?blogID=47      

 

首先,打开fckeditor下的fckconfig.js文件,找到FCKConfig.ToolbarSets["Default"]FCKConfig.ContextMenu 在他们后面加上InsertCode,这个当然是自己要添加的工具栏的名字了。然后,我们在“fckeditor\editor\lang\”文件夹下找到zh-cn.js,在最后一行后面加上以下2句:

//自定义

InsertCode:"插入代码",

InsertCodeProp:"插入代码属性"

注意在这2句前DlgAboutInfo      : "要获得更多信息请访问 "后面加个逗号。当然,还可以同样方法修改其他语言js文件,我就修改了繁体的zh.js和英文的en.js

 

    现在,我们已经定义了工具栏,开始第二大步,打开“fckeditor\editor\js\”下的fckeditorcode_gecko.jsfckeditorcode_ie.js,我们开始注册工具栏;

第一步:在2个文件中搜索“InsertHorizontalRule”,在后面加上“InsertCode”。

第二步:同样在2个文件中搜索“default:if (FCKRegexLib”,在“default”之前加上这么一句:

Case 'InsertCode':B = new FCKDialogCommand('InsertCode' , FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.htm',510,450);break;

这句话意思就是,点击工具栏图标时打开InsertCode.htm文件,定义了高和宽,至于文件内容我们之后再说。

第三步:还是在这2个文件,搜索“default:alert(FCKLang.UnknownToolbarItem”,在“default”之前加上下面一句:

case 'InsertCode':B = new FCKToolbarButton('InsertCode' , FCKLang.InsertCode,null,null,null,null,67);

        这句话意思是定义了工具栏的图标,FCKeditor的默认图标文件是“fckeditor\editor\skins\default\”下的fck_strip.gif图片,本人由于不想用重复的默认图标,因此加了一个小图片:

新增的插入代码图片20*20

默认图片是16*2056,用PS把画布加长到16*2072,再把自己的小图片放到最下面,这样,自定义的图片刚好排67位。以后加新功能还可以依次增加此图片。

好了。经过这么3步,我们已经把自定义工具栏加上去了。(在about之后,如果想加在中间,可以在刚才的第二和第三步里把添加的语句加到相应的Case前面。)

 

    做了这么多,任务算完成1/3,加油!

下面我们开始定义“InsertCode.htm”文件:

    在“fckeditor\editor\dialog\”下新增InsertCode文件夹,新建HTM文件InsertCode.htm,里面代码先拷贝“fckeditor\editor\dialog\fck_textfield.html”文件,好了,,大手术开始:

 

    首先,在“<title></title>”中加上“Insert Code Properties”,这个是打开的新窗体的标题;更改FCKeditorJS文件“common/fck_dialog_common.js”的引用为“../common/fck_dialog_common.js”,再加上双鱼编辑器里的插入代码脚本“<script src="code.js" type="text/javascript"></script>”。

然后更改“window.onload = function()”函数,把里面的if  {}  else{}删除掉,再把function Ok()里的代码全部删除,加上下面2句:

oEditor.FCK.InsertHtml(code()) ;

    window.parent.Cancel() ;

因为我们是更改成代码格式的字符串加到FCKeditor编辑器里,所以用到内置的InsertHtml函数,code()函数传过来的是字符串;至于下面的html代码,就更改为双鱼编辑器里InsertCode.htm的代码(这里就不提供了,本人把更改好的放上来,这里只做个简单说明)。

    下面我们修改“code.js”文件里的代码,把“function code()”里的

window.returnValue = FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);

window.close();

这两句更改为一句:

return FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);

 

好了,至此,就可以使用插入代码功能了。(添加其他功能的时候到这一步就可以完成了。)

完成后的编辑器图片:
 
最后效果图

看见最后一个图片没,这就是了,点击后出现的图形为:

弹出的窗口图片

 

嘿,兴冲冲地试了下,诶呀,怎么代码前这么多红XX呢?看下源代码,原来里面的折叠图片路径全是错的,这下郁闷了,试了N种方法,都没用。无奈,最后查看FCKeditor中其他的htm文件,发现个东东:FCKConfig.BasePath,作用是取得editor文件夹的相对路径,例如我的例子就是:“/AJAXEnabledWebSite1/FCKeditor/editor/”。好了,那现在为了得到我们存放折叠图片的文件夹路径,我们现在要定义一个变量,打开fckconfig.js文件,在文件最后一行之后加上这么一句:

FCKConfig.CodePath  = FCKConfig.BasePath + 'dialog/InsertCode/codeimages/' ;

    有了图片路径之后,我们的继续修改“code.js”文件:

首先,在“function code()”前面加上下面3句:

var oEditor = window.parent.InnerDialogLoaded() ;

var FCKConfig = oEditor.FCKConfig ;

var CodeImagePath   = FCKConfig.CodePath ;//得到图片所在文件夹路径

搜索“PiscesTextEditor/codeimages/”,全部替换为“”(即,全部删除。注意:是空,不是空格;)

同样搜索“PiscesTextEditor\/codeimages\/”,全部替换为“”

替换好之后,我们就要用到上面的图片所在文件夹路径了,我们这里使用正则替换字符串。

搜索“if (showLine) str = AddLineNumber(str);   ”,在它前面加上下面2句:

var src = /\b(src=")\b/g;

    str = str.replace(src,'src="'+CodeImagePath);//得到正确路径

意思就是,把所有img控件的只有图片名的src路径替换为正确的相对路径。

 

好了。。修改就到这里,不过,还只是完成了95%,为什么呢,仔细试了下,双鱼编辑器的插入代码功能还有好多BUG。喜欢看下去的朋友继续看,不喜欢的可以直接下载我的文件了。

今天到此为止,明天我们继续,修改Code.js文件,减少点BUG,源码明天提供

posted on 2007-06-17 22:31 打你鸟鸟头 阅读(2425) 评论(12) 编辑 收藏

FeedBack:
2007-06-18 08:39 | 海浪空间      
图片都看不到
 回复 引用 查看   
2007-06-18 12:32 | niukun      
这个我也用过 就是直接引用的 感觉还蛮好用的
 回复 引用 查看   
2007-06-18 14:37 | 龍卷风[未注册用户]
冒失好麻烦,FCKeditor是支持自写插件的,方便的很捏~
 回复 引用   
#4楼[楼主]
2007-06-18 22:48 | 打你鸟鸟头      
@龍卷风

都没试过怎么自写。
知道怎么添加后其实也简单,最难的地方就是新窗体里的js代码。找高感觉就好多了

 回复 引用 查看   
2007-06-25 10:32 | seaarea[未注册用户]
我做了1/3,图标也改了,怎么工具栏上不出现按钮呢?郁闷。
我也下载了那个源代码,放到程序中,怎么也不出现按钮呢?
怎么回事啦,能说明一下不

 回复 引用   
#6楼[楼主]
2007-06-25 17:58 | 打你鸟鸟头      
@seaarea

按理说只要正确对上数字就能显示。
把:null,null,null,null,67);的67改成其他的,先试试用默认的图片能行吗。
你下的源码是哪个,是整个2.4.1版的还是下面修改过的文件覆盖的。
覆盖的也许会和你本身的有冲突。

 回复 引用 查看   
2007-08-06 13:39 | zmhhxl[未注册用户]
如何返回保存文件的路径文件名
 回复 引用   
#8楼[楼主]
2007-08-07 20:17 | 打你鸟鸟头      
@zmhhxl
找到\fckeditor\editor\dialog\fck_link\fck_link.js

找到function Ok()
里面的
case 'url' :
sUri = GetE('txtUrl').value ;
这个就是上传后的Url,
同样的Image、Flash文件都是相似的。只要找到相应文件然后在JS里修改就可以了。

 回复 引用 查看   
2009-05-05 22:32 | 能不能简单点[未注册用户]
我晕了,改这么多地方,而且要修改那么复杂的文件里的东西
我直接添加插件,只要改两个文件(总计三个地方)自制一个htm窗体文件,一个js注册文件和一个图标,搞那么多事不嫌麻烦,真想不通你们怎么能研究出这么多麻烦的东西的,难道官方有此类教程,你们这些高人就是看了那些教程后摸出来的?
你们强,有方便的插件功能不用,非要动大手术,都搞外科的!

 回复 引用   
基础应用 http://www.eiya.net
请光临我的小站查看最新文章
点击这里给我发消息
昵称:打你鸟鸟头
园龄:4年11个月
粉丝:1
关注:0

搜索

 
 

常用链接

随笔分类(9)

随笔档案(9)

文章分类(104)

站点收藏

作品

最新评论

阅读排行榜

评论排行榜

推荐排行榜