欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程

目录导航

FCKeditor 添加自定义按钮

美国SK机房 添加于 2011-09-05  
javascript教程

做为一个程序员,在自己的网站怎么能没有插入代码的功能呢?所以就研究了一下FCKeditor(版本2.6.3,应该是最新版吧。)。在里面添加了一个插入代码的功能;
首先在 lang 目录中打开 en.js 和 zh-cn.js 在这两个文件中添加文字项 我这里添加的是 RunCode:'插入代码' 为了方便自己查看我就添加在了最上面

下面要操作的是 js 目录下的。fckeditorcode_ie.js和fckeditorcode_gecko.js 这两个文件有很多东西是相同之所以要用两个文件来实现主是用于兼容 fckeditorcode_gecko.js 是在firefox类浏览器里使用的,fckeditorcode_ie.js是在IE下使用的。

由于两个文件改相同地方这里我就以 fckeditorcode_ie.js 为例了。

首先查找:default:if (FCKRegexLib.NamedCommands.test(A)) 找到后在 default 前添加如下代码:

case 'RunCode':B=new FCKDialogCommand('RunCode',FCKLang.RunCode,'dialog/ghost/gho_runcode.html',500,300);break;

参数说明:RunCode 按钮名称;FCKLang.RunCode就是刚才添加的文字;第三个是点击后要打开的文件;最后两个就是宽和高了。

注意:为了方便管理我们把自己新加的东西放到新文件夹中。这个我dialog里新建了一个ghost文件夹

再查找:default:alert(FCKLang.UnknownToolbarItem.replace(/%1/g,A)) 找到后在 default 前添加如下代码:

case 'RunCode':B=new FCKToolbarButton('RunCode',FCKLang.RunCode,null,null,null,null,77);break;

fckeditorcode_gecko.js 文件中要查找相同的东西也添加相同东西。

下一步:将按钮显示到具栏上。打开fckconfig.js文件找到定义工具栏的地方,内置有两种工具栏 Default 和 Basic 不过我自己使用的又多加了几种。 比如这里我们只添加到 Default 工具栏上了。 在要显示的地方直接加入 RunCode 就OK了。 现在在用浏览器查看我的编辑器就多了一个插入代码的图标了。还有一个比较简单的问题就是到 dialog/ghost 目录下新建一个 gho_runcode.html 文件。点击显示出来的图标就可以看到插入代码的窗口了。

下面最重要的来了。我是使用人家编辑器里插入代码功能的代码。去下载一个“双鱼文本编辑器” 把里面的 code.js 和 images目录下的codeimages 目录复制到刚才新建的 ghost 目录下。然后在 gho_runcode.html 文件中将 code.js 文件引入。下面开始修改代码。先把fck_form.html里面的代码全部复制到gho_runcode.html 文件中;为了简化操作我们直接把 “双鱼文本编辑器”中的InsertCode.htm文件的html标签直接粘贴过来把gho_runcode.html文件里原有html标签全部覆盖掉;下面开始修改gho_runcode.html文件里的JS代码,只修改 Ok 函数就可以了。 把Ok函数原来的代码全部删除将函数体加上如下代码:

oEditor.FCK.InsertHtml(code()) ;
window.parent.Cancel() ;
return true ;
然后修改 code.js 里的 code 函数 用 return FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);将原来的:
window.returnValue = FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion); 
window.close();替换即可。
现在已经可以正常使用新添加的插入代码功能了。还有一个问题就是 code.js 里面有图片而图片路径与 FCKeditor 的路径不一致而产生了无法正常显示图片的问题。
因为本人十分懒惰不想在写了。所以把别人的复制过来可以参考一下。不过我自己并不是采用他的方法修改的。个人建议为了不受 FCKeditor以后升级的影响最好将自己附加的功能全部独立出来。
下面是我摘抄的:
嘿,兴冲冲地试了下,诶呀,怎么代码前这么多红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路径替换为正确的相对路径。
如果有人比本人更懒那不想去研究人家的代码可以直接通知我,我发一份给你。呵呵

转载自零度科技:http://www.ldisp.com/a/javascript/2011/1054.shtml

上一篇:通用滑动门类,JS选项卡
下一篇:Marquee替代 - 无间滚动兼容主流浏览器

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

134

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理