想通过FCKeditor源代码增加一个嵌入Media的按钮,然后实现Media的上传和嵌入播放。就如同嵌入Flash一样

解决方案 »

  1.   

    参考一下这个看看能否有帮助http://www.cnblogs.com/zss1100/archive/2007/06/18/788084.html    今天,我们开始修改JS代码了,可惜我的正则不好,不能有很大改动,只好一点点来了。废话不说,开工: =====================以下为双鱼编辑器中Code.js文件的代码修改=================1、双鱼编辑器本身对代码的空格支持不够好,因此我在“str = "<div style=\""+CodeDivStyle+"\">" + str + "</div>"; “后面加了一句(也一定要在这句之后):str = str.replace(/\s{2}/g,"&nbsp;&nbsp;");意思是替换连续2个空格(不能为一个,否则会把不该替换的也替换)为可显示的HTML代码”&nbsp;”,这样,代码各行之前就和原代码一样,会有空格,代码看起来更加清晰。 2、格式化VBScript代码函数中,少了一些关键字,我们再加一些,查找“|While|With|Xor”,在它之后加上:“|Sub|Len|Right|Function|IsNull|IsEmpty|Left|Cint|Instr|Cstr|Replace|Chr|Error|Trim|Mid|Instrrev|LCase|UCase|Hex”诶呀,累了,不知道还有些什么,没加上的各位朋友自己加吧,头疼。 3、格式化SQL,有待高手来解决,,还有好多没改,目前就修改下注释,变为绿色;搜索“str = str.replace(/([%\^\*\(\)\-\+=|\/,\.~])/gi,"<font color=\"#999999\">$1</font>");”把它和它下面一行都删除,之后在函数最后一行 “return (str); ”的前面加上:“str = FortmatCodeRe_SQL(str);”现在写FortmatCodeRe_SQL函数://SQL注释替换为绿色function FortmatCodeRe_SQL(str){    str = str.replace(/(\/\*)([\s\S]*?)(\*\/)/g,            function() {                    var s = arguments[1];                    if (arguments[2] != "")                        s = "<font style=\"color:#008080\">"+s+ClearColorTag(arguments[2])+arguments[3]+"</font>";                    else                        s += arguments[3];                    return(s);                });     str = str.replace(/([^\-])(\-{2})(.*)/g,            function() {                    var s;                    if (arguments[3].substr(0,1) != "")                        s = "<font style=\"color:#008080\">"+arguments[2]+ClearColorTag(arguments[3])+"</font>";                    else                        s = arguments[2]+arguments[3];                    return(arguments[1]+s);                });    return(str);} 搜索“str = str.replace(/(N)('.*?')/gi,         function() {              return (arguments[1]+"<font color=\"#FF0000\">"+arguments[2].replace(/<.*?>/g,"")+"</font>");         });”更改为:“str = str.replace(/('.*?')/gi,         function() {              return ("<font color=\"#FF0000\">"+arguments[1].replace(/<.*?>/g,"")+"</font>");         });”函数解决了注释为绿色,但是又把特殊符号变为灰色的功能取消了。。还不知道怎么解决。 4、搜索“// 双引号中关键字不变色”,把下面一段函数删除,正则有问题,会捣乱格式。后面会加个函数,在各个格式化函数中调用。     // 双引号中关键字不变色     str = str.replace(/(&quot;)([\s\S]*?)\1/g,              function() {                   return(arguments[1]+arguments[2].replace(/(<[\s\S]*?>)/g,"")+arguments[1]);              });5、搜索“//  str = FormatBrace(str);”,把前面的斜杆删除,并把它的下面一句:“str = FormatValue(str);”放到函数最前面(防止把注释里的双引号中值颜色也变棕色)6、新增函数:替换收缩图片;在格式化c#,vb.net,vbscript,jscript中相应地方添加该函数。7、新增函数:双引号中关键字不变色;加在各格式化函数中。8、增加个VB.NET格式化:    搜索“case "SQL": str = FormatSQL(str,canCollapse); break;”,在其后加上:    “case "VB.NET": str = FormatVBDOTNET(str,canCollapse); break;”9、更改vbscript,jscript,加上折叠功能。 (以上6-9步代码较多,这里不放出,有兴趣的可以查看code.js。都有详细注释。)  终于,铁棒被我们磨成针了,现在,我们可以真正的使用插入代码功能,试一试,恩。感觉蛮好!上面的代码看着麻烦,,想研究的朋友可以看看,主要做个参考,我更改了什么。方便朋友们以后对这功能的增强。 
      

  2.   

    http://www.cnblogs.com/zss1100/archive/2007/06/17/786773.html在此文开始之前,本人用了一天时间研究了在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.js和fckeditorcode_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”,这个是打开的新窗体的标题;更改FCKeditor的JS文件“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。喜欢看下去的朋友继续看,不喜欢的可以直接下载我的文件了。
      

  3.   

    http://j2ee.blog.sohu.com/36813753.html   FCKEditor是一个功能强大的开源在线编辑器,所以是非常适合我等兜兜无啥银子的人拿来“把玩”的~~~呵呵。一个产品即使功能再强大也不能满足所有用户的需求,当然FCKEditor也不例外咯。就拿我现在所开发的一个系统(工作流)来说,就遇到了FCKEditor不能满足我的要求的情况。因为我想在工具栏中加入自己的操作控制按钮,配置当然搞不定咯,就只有改源代码了。可一看FCKEditor经过处理后的JS源码,头立刻就大了——无换行无注释,一大堆JS代码堆在那里,想看懂几乎没门。当然它这样做也是有好处的,要不这大的一个东西加载怎么会那么快呢。看不懂处理后的JS源码,我们可以看有格式的源码嘛,所以就上网down了一个2.4的FCKEditor。好了,现在就让我们开始怎么一步一步的加入我们自己的操作菜单到工具栏中去。    比如我想加一个我自己的输入框用来控制日期的输入,即该输入框只能通过选择来选择日期,这个我们结合日期控件my97来做,呵呵,充分利用已有的成果。有人会说,我直接改它的对话框不就得了,当然这也是可以的,可我们今天要做的就是如何加入自己的工具栏操作,这样以后就可以依次类推,加入任何想要加入的操作了:-)。    首先,我们给这个日期输入框定一个名字,就叫做CTRL_Date吧。第一步嘛,我们就直接在fckconfig.js文件中的Basic工具条集(FCKConfig.ToolbarSets["Basic"])中加入这个名称,加进去很简单吧,呵,不多说了。然后呢,也得给它弄个中文名称什么的吧,直接打开语言文件zh-cn.js,英文的就不管了哈,加入:CTRL_Date : "日期控件"。另外还得加一个上下文语言提示菜单,这样在编辑区域内就可以通过右键选择属性来进行编辑操作了。也是在zh-ch.js中加入:CTRLDateProp : "日期控件属性"。到这里,又要回到fckconfig.js文件中了,我们在FCKConfig.ContextMenu中加入CTRL_Date,这样才能使其拥有上下文菜单嘛。到这里,基础工作就做完了,呵呵,然后就是艰巨的源码改造工程了,当然了也不要怕咯,一步一步来就没问题了~~@_@    我们解压下载的FCKEditor2.4,然后找到fckregexlib.js文件,找到其中的NamedCommands,然后把CTRL_Date加到最后,然后再修改fckeditor处理后的最终JS文件fckeditorcode_ie.js(只改IE的,至于FF就不管了,对不起它了,嘿)。网上说可以用一个什么程序来进行源码打包的,可我在下的压缩包里没看到呢,所以就只有手动修改这个最终的文件了。在该文件中找到NamedCommands这一位置然后在最后加入CTRL_Date,这样就注册了一个命令CTRL_Date了。然后再找到源代码文件夹中的fckcommands.js文件,是不是看到很多case啊,呵,这就是工具栏中每个操作的命令了。我们依葫芦画瓢,在最后加上:case 'CTRL_Date':oCommand=new FCKDialogCommand('CTRL_Date',FCKLang.CTRL_Date,'dialog/workflow/fck_ctrl_date.html',380,230);break ;这个意思就是说,当你单击工具栏上的日期控件的时候就会以模式对话框打开dialog/workflow/fck_ctrl_date.html这个网页文件,至于是什么内容,我们待会再说。这样写好后,我们就可以加入到fckeditorcode_ie.js文件中了。我们在fckeditorcode_ie.js文件中找到new FCKUndefinedCommand()这个位置,然后在它之后的break;之后加上我们刚才写的代码(注意把oCommand改为B后再加入,因为我的最终处理源码中是B,估计这样简写也是为了减少源码的大小吧)。这两个步骤完成后,我们就可以在工具栏中单击日期控件时打开我们自己定义的日期控件属性编辑的网页文件了。    然后还一工程就是增加该控件的上下文菜单,要不然在编辑区域右键选择时就会弹出输入框的属性和对话框了,这可不是我们想要的结果呢。我们还是先在源码中修改,然后再复制到最终处理的源码文件中去。找到文件fcktoolbaritems.js,也有很多case哦,看名字就知道这是设置工具栏中的按钮项了。同样,我们在最后加入:case 'CTRL_Date' : oItem=new FCKToolbarButton('CTRL_Date',FCKLang.CTRL_Date,null,null,null,null,51);break;注意其中的55表示的是该操作按钮的图标索引(这个索引指的是skins目录下的fck_strip.gif文件中图标的顺序索引),我们使用和输入框一样的图标就是51了。同样,我们在最终文件fckeditorcode_ie.js中查找字符串alert(FCKLang.UnknownToolbarItem.replace(/%1/g(注意把空格去掉),然后在它之前的default之前加入我们刚写的语句(同样把oItem改成B)。这是完成上下文菜单的第一步,还有第二步也就是最后一步了,胜利就在眼前哦,加油了,呵呵。    接着就是文件fck_contextmenu.js的修改了。一样也是很多case,我们加入如下语句
    case 'CTRL_Date':return{AddItems:function(A,B,C){if(C=='INPUT'&&B.type=='text'&&B.className=='_wf_date'){A.AddSeparator();A.AddItem('CTRL_Input',FCKLang.CTRLDateProp,51);}}};(注意这里的A,B,C就是源码中menu,tag,tagName,这里直接写成A,B,C是为了直接插入到最终代码中去而已)。注意到上面中不是有个B.className=='_wf_date'么?这是因为FCKEditor中已经自带了input输入框的控制,所以这里我们用一个样式名称来区别它自带的还是我们自加的。当然这个样式名称可以随便取的,而且在fck_ctrl_date.html这个网页文件(我们自己写的来编辑日期控件的属性文件)中需要给日期控件也就是input输入框加上className="_wf_date"属性以示区别原有的input输入框。当然,我们还要修改原来的input的case,在fckeditorcode_ie.js文件中找到字符串case 'TextField':return {AddItems所在的位置(如果找不到请去掉或增加空格),然后修改if中的条件,加一个&&B.className!='_wf_date'。最后就把我们写的上面的代码加到TextField这个case之后就可以了。这样修改后就会使当右键单击某个元素时,如果是输入框并且样式名称不是我们指定的日期控件则会调用它自带的输入框属性编辑网页,如果样式名称是我们自己定义的日期控件的名称则会调用我们自己编辑的属性网页,这样就达到了同是输入框在查看属性时分别调用不同属性编辑网页的目的了。    好了,完成上面的所有步骤后就可以保存修改后的fckeditorcode_ie.js文件了。这里还有一点工作要做哦,就是在dialog目录下新建一个目录workflow,然后在它下新建一个日期控件属性输入的网页文件fck_ctrl_date.html。具体的内容我们可以直接copy FCKEditor自带的fck_textfield.html网页文件的内容过来,然后简单的修改下就可以了,但重要的是别忘了在ok函数中给你的日期控件加上className="_wf_date"属性哦,否则右键属性查看时则会调用FCKEditor自带的文本框输入的编辑网页了。    经过这么多步骤,已经全部完工了。赶快打开你的在线编辑器看看吧~~~~