在FCKeditor 2.6中添加插入视频和音频功能

本文转载

在FCKeditor 2.6中添加插入视频和音频功能

这里有两种方式,一是自己修改,二是使用插件

1.自己修改

      FCKeditor 是现在用的最多的可视编辑器,乐乎也是使用了该编辑器,应大家的要求,添加了插入视频和音频的功能,因为2.6版的修改可能和其他版本不一样,所以我把修改的地方列举出来,格式我是看到网上有位同志的格式很好,照抄的,内容已经修改

修改前注意备份文件,以免造成不必要的麻烦。

一、分别打开:editor/js/fckeditorcode_ie.js和/editor/js/fckeditorcode_gecko.js

 
找到程序代码

 

以下是代码片段:
Js代码 
  1. ||//.swf($|#|/?)/i.test(A.src)    
Js代码 
  1. ||//.swf($|#|/?)/i.test(A.src)    
这段代码的主要用来判断后缀名,如果后缀名不是swf则返回,把它替换为:

以下是代码片段:


Js代码 
  1. ||//.swf($|#|/?)/i.test(A.src)||//.mpg($|#|/?)/i.test(A.src)  
  2. ||//.asf($|#|/?)/i.test(A.src)||//.wma($|#|/?)/i.test(A.src)  
  3. ||//.wmv($|#|/?)/i.test(A.src)||//.avi($|#|/?)/i.test(A.src)  
  4. ||//.mov($|#|/?)/i.test(A.src)||//.mp3($|#|/?)/i.test(A.src)  
  5. ||//.rmvb($|#|/?)/i.test(A.src)||//.mid($|#|/?)/i.test(A.src)  
Js代码 
  1. ||//.swf($|#|/?)/i.test(A.src)||//.mpg($|#|/?)/i.test(A.src)  
  2. ||//.asf($|#|/?)/i.test(A.src)||//.wma($|#|/?)/i.test(A.src)  
  3. ||//.wmv($|#|/?)/i.test(A.src)||//.avi($|#|/?)/i.test(A.src)  
  4. ||//.mov($|#|/?)/i.test(A.src)||//.mp3($|#|/?)/i.test(A.src)  
  5. ||//.rmvb($|#|/?)/i.test(A.src)||//.mid($|#|/?)/i.test(A.src)  
文件格式可以根据情况来修改,但是注意要和其他的几个地方吻合
 
二、打开/editor/dialog/fck_flash/fck_flash.js
 
1、增加程序代码,这段代码用来判断后缀名

 

 

Js代码 
  1. function WinPlayer(url){  
  2. var r, re;  
  3. re = /.(avi|wmv|asf|wma|mid|mp3|mpg)$/i;  
  4. r = url.match(re);  
  5. return r;  
  6. }  
  7.    
  8. function RealPlayer(url){  
  9. var r, re;  
  10. re = /.(.rm|.ra|.rmvb|ram)$/i;  
  11. r = url.match(re);  
  12. return r;  
  13. }  
  14.    
  15. function QuickTime(url){  
  16. var r, re;  
  17. re = /.(mov|qt)$/i;  
  18. r = url.match(re);  
  19. return r;  
  20. }  
  21.    
  22. function FlashPlayer(url){  
  23. var r, re;  
  24. re = /.swf$/i;  
  25. r = url.match(re);  
  26. return r;  
  27. }  
Js代码 
  1. function WinPlayer(url){  
  2. var r, re;  
  3. re = /.(avi|wmv|asf|wma|mid|mp3|mpg)$/i;  
  4. r = url.match(re);  
  5. return r;  
  6. }  
  7.    
  8. function RealPlayer(url){  
  9. var r, re;  
  10. re = /.(.rm|.ra|.rmvb|ram)$/i;  
  11. r = url.match(re);  
  12. return r;  
  13. }  
  14.    
  15. function QuickTime(url){  
  16. var r, re;  
  17. re = /.(mov|qt)$/i;  
  18. r = url.match(re);  
  19. return r;  
  20. }  
  21.    
  22. function FlashPlayer(url){  
  23. var r, re;  
  24. re = /.swf$/i;  
  25. r = url.match(re);  
  26. return r;  
  27. }  
 
以下是代码片段:
 
2、替换程序代码,这段代码是在UpdatePreview中用来添加type属性
以下是代码片段:
Js代码 
  1. SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;  
Js代码 
  1. SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;  

 

 

Js代码 
  1. if(WinPlayer(GetE('txtUrl').value)!=null){  
  2. SetAttribute( e, 'type', 'application/x-mplayer2' ) ;  
  3. }  
  4. if(RealPlayer(GetE('txtUrl').value)!=null){  
  5. SetAttribute( e, 'type', 'audio/x-pn-realaudio-plugin' ) ;  
  6. }  
  7. if(QuickTime(GetE('txtUrl').value)!=null){  
  8. SetAttribute( e, 'type', 'application/video/quicktime' ) ;  
  9. }  
  10. if(FlashPlayer(GetE('txtUrl').value)!=null){  
  11. SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;  
  12. SetAttribute( e, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer ' ) ;  
  13. }  
Js代码 
  1. if(WinPlayer(GetE('txtUrl').value)!=null){  
  2. SetAttribute( e, 'type', 'application/x-mplayer2' ) ;  
  3. }  
  4. if(RealPlayer(GetE('txtUrl').value)!=null){  
  5. SetAttribute( e, 'type', 'audio/x-pn-realaudio-plugin' ) ;  
  6. }  
  7. if(QuickTime(GetE('txtUrl').value)!=null){  
  8. SetAttribute( e, 'type', 'application/video/quicktime' ) ;  
  9. }  
  10. if(FlashPlayer(GetE('txtUrl').value)!=null){  
  11. SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;  
  12. SetAttribute( e, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer ' ) ;  
  13. }  
 
以下是代码片段:
3、替换程序代码,这段代码是在UpdateEmbed中用来添加type属性

 

 

Js代码 
  1. SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;  
  2. SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;  
Js代码 
  1. SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;  
  2. SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;  
 
以下是代码片段:

 

 

Js代码 
  1. if(WinPlayer(GetE('txtUrl').value)!=null){  
  2.     SetAttribute( e, 'type' , 'application/x-mplayer2' ) ;  
  3.     SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;  
  4. }  
  5. if(RealPlayer(GetE('txtUrl').value)!=null){  
  6.     SetAttribute( e, 'type' , 'audio/x-pn-realaudio-plugin' ) ;  
  7.     SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;  
  8. }  
  9. if(QuickTime(GetE('txtUrl').value)!=null){  
  10.     SetAttribute( e, 'type' , 'video/quicktime' ) ;  
  11.     SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;  
  12. }  
  13. if(FlashPlayer(GetE('txtUrl').value)!=null){  
  14.     SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;  
  15.     SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;  
  16. }  
Js代码 
  1. if(WinPlayer(GetE('txtUrl').value)!=null){  
  2.     SetAttribute( e, 'type' , 'application/x-mplayer2' ) ;  
  3.     SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;  
  4. }  
  5. if(RealPlayer(GetE('txtUrl').value)!=null){  
  6.     SetAttribute( e, 'type' , 'audio/x-pn-realaudio-plugin' ) ;  
  7.     SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;  
  8. }  
  9. if(QuickTime(GetE('txtUrl').value)!=null){  
  10.     SetAttribute( e, 'type' , 'video/quicktime' ) ;  
  11.     SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;  
  12. }  
  13. if(FlashPlayer(GetE('txtUrl').value)!=null){  
  14.     SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;  
  15.     SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;  
  16. }  
 
以下是代码片段:

三、打开/fckconfig.js,该文件为配置文件

替换程序代码,这个是在上传文件的时候检查后缀名

以下是代码片段:
Js代码 
  1. FCKConfig.FlashUploadAllowedExtensions = ".(swf)$" ; // empty for all  
Js代码 
  1. FCKConfig.FlashUploadAllowedExtensions = ".(swf)$" ; // empty for all  
以下是代码片段:
Js代码 
  1. FCKConfig.FlashUploadAllowedExtensions   
  2.     = ".(swf|fla|mpg|asf|wma|wmv|avi|mov|mp3|rmvb|mid)$" ; // empty for all  
Js代码 
  1. FCKConfig.FlashUploadAllowedExtensions   
  2.     = ".(swf|fla|mpg|asf|wma|wmv|avi|mov|mp3|rmvb|mid)$" ; // empty for all  

三、打开/editor/lang/zh-cn.js 文件,该部分为语言文件,Flash替换掉就可以了

然后整体修改完成,现在lehu已经支持上传视频和音频文件,不过注意的是,如果视频文件太大,还是可能出现不能播放的情况

四、还需要在fckeditor.properties文件里加上(使用fckeditor2.6.3,fckeditor-java2.4)

Java代码 
  1. connector.resourceType.flash.extensions.allowed   
  2.       = swf|fla|mpg|asf|wma|wmv|avi|mov|mp3|rmvb|mid  
Java代码 
  1. connector.resourceType.flash.extensions.allowed   
  2.       = swf|fla|mpg|asf|wma|wmv|avi|mov|mp3|rmvb|mid  
 
2.插件 
这里介绍一个FCK的插件,多媒体插件,支持Windows Media,Real,QuickTime,Flash,
Shockwave,完全可以替换FCK自带的flash插入功能。
前段时间在发过一篇《利用Fckeditor插入MP3或视频文件》,是通过修改FCK的Flash插入实现插入多媒体的,和这里的插件原理是一样的。
插件的具体使用方法如下:
1、解压文件到 FCKeditor/editor/plugins,命名为Media
- 隐藏引用文字 -
2、修改配置文件 FCKeditor/fckconfig.js ,包括启用插件和添加按钮。
JavaScript代码
Js代码 
  1. FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;         //找到这一句,配置插件路径  
  2. FCKConfig.Plugins.Add( 'Media', 'en,zh,zh-cn' ) ;  //启用插件  
  3.     
  4. …………  //中间代码省略  
  5.     
  6. FCKConfig.ToolbarSets["Default"] = [    
  7.     ['Source','Templates'],    
  8.     ['FontName','FontSize'],    
  9.     ['TextColor','BGColor'],    
  10.     ['Image','Flash'],  //可以用Media替换Flash  
  11.     ['Table','Rule'],    
  12.     ['FitWindow','ShowBlocks'],    
  13.    ['Smiley','SpecialChar','Media'], //或者加入Media按钮  
  14.     '/',    
  15.     ['PasteText','PasteWord','RemoveFormat'],    
  16.     ['Undo','Redo','Find','Replace'],    
  17.     ['Bold','Italic','Underline','StrikeThrough'],    
  18.     ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],    
  19.     ['JustifyLeft','JustifyCenter','JustifyRight'],    
  20.     ['Anchor','Link','Unlink'] //我的按钮的配置,可能和你的不太一样  
  21. ] ;    
Js代码 
  1. FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;         //找到这一句,配置插件路径  
  2. FCKConfig.Plugins.Add( 'Media', 'en,zh,zh-cn' ) ;  //启用插件  
  3.     
  4. …………  //中间代码省略  
  5.     
  6. FCKConfig.ToolbarSets["Default"] = [    
  7.     ['Source','Templates'],    
  8.     ['FontName','FontSize'],    
  9.     ['TextColor','BGColor'],    
  10.     ['Image','Flash'],  //可以用Media替换Flash  
  11.     ['Table','Rule'],    
  12.     ['FitWindow','ShowBlocks'],    
  13.    ['Smiley','SpecialChar','Media'], //或者加入Media按钮  
  14.     '/',    
  15.     ['PasteText','PasteWord','RemoveFormat'],    
  16.     ['Undo','Redo','Find','Replace'],    
  17.     ['Bold','Italic','Underline','StrikeThrough'],    
  18.     ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],    
  19.     ['JustifyLeft','JustifyCenter','JustifyRight'],    
  20.     ['Anchor','Link','Unlink'] //我的按钮的配置,可能和你的不太一样  
  21. ] ;    
 
找到类似代码添加如下内容
Js代码 
  1. FCKConfig.MediaUpload = true ;  
  2. FCKConfig.MediaUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' +   
  3.        _QuickUploadLanguage + '/upload.' + _QuickUploadLanguage + '?Type=Media' ;  
  4. FCKConfig.MediaUploadAllowedExtensions = ".(avi|asf)$" ;  // empty for all  
  5. FCKConfig.MediaUploadDeniedExtensions = "" ;       // empty for no one  
Js代码 
  1. FCKConfig.MediaUpload = true ;  
  2. FCKConfig.MediaUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' +   
  3.        _QuickUploadLanguage + '/upload.' + _QuickUploadLanguage + '?Type=Media' ;  
  4. FCKConfig.MediaUploadAllowedExtensions = ".(avi|asf)$" ;  // empty for all  
  5. FCKConfig.MediaUploadDeniedExtensions = "" ;       // empty for no one  
  
下载地址: http://dev.fckeditor.net/ticket/382

转载于:https://my.oschina.net/xiaohelong/blog/366903

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor。 FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。 “FCKeditor”名称的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。 正如MS Office在个人PC上是最普及的文本编辑器一样,FCKeditor使用最广泛的网页编辑器,所见即所得,简单易用,功能很不错。 首先需要说明的是,与通常意义上的编辑器不同,FCKeditor并不是一个需要安装的程序,或许说它是一个网页源代码更为贴切,所以,取而代之安装过程的是与网页源代码相集成的调用过程。 FCKeditor运行的环境是网页浏览器,基本上IE5.5以上,或者是其它浏览器如火狐、360、Chrome、QQ、Netscape等,都可以兼容。而它可以兼容并集成的网页代码格式也相当多,包括ASP、ASP.Net、PHP、Perl、Java等,支持格式之多,也是同类编辑器无法替代的。 在这一版本我们完全实现了与轻松互联网开发平台的无缝整合,在平台调用FCKeditor使用标签一样Easy(例子文件在_samples/editor目录下)。而且没给恶意攻击者留任何可能的漏洞。 另外,对重点功能也进行扩展,如上传文件和源代码高亮显示。上传文件不再需要专门的配置,直接使用即可,强化了上传图片、附件及目录管理功能,实现全汉语UI操作和实时预览。增加了插入Flash、媒体及视频功能,其操作仍然是同样地轻松。 Easy do it,轻松互联网开发平台(原WebEasy,简称轻开平台)是一个运行于JVM+HTTP(及HTTPS协议)的应用服务器开发平台。 轻开平台基于汉语的思维方式并巧妙地结合英文思维方式的优点设计了一套轻松Easy的开发规则,用java语言开发实现为一个强大的开发平台,为开发者提供了一个直接轻松面向应用的开发环境。 轻开平台同时支持使用多个数据源和不同厂商提供的数据库服务器,只要支持JDBC访问及基于SQL规范的数据库(如:MySQL、SQLServer、Oracle、DB2、Teradata、SyBase等关系型数据库及基于SQL的大数据分析系统Vertica)。轻开平台能在一个应用系统平等使用多个不同的数据库,而这只需要添加一个配置文件就轻松实现。“信息孤岛”在这儿就只剩下了一个传说! 轻开平台的低层开发语言是Java,也就是说Java能干啥轻开就能干啥,如JAVA能跨平台(操作系统)轻开就能跨平台。而开发者却不需要会Java! 轻开平台的最大优势就是Easy,基本上解决了传统开发的不能克服的由于应用需求变更而导致开发无法继续进行和前边提到的“信息孤岛”问题,基于轻开平台的直接好处是: • 加快开发进程:计算机诞生以来,软件开发一直是一项高深莫测的工作,被冠以“高科技”、“新技术”,导致信息化的门坎太高,IT技术不能普遍服务于大众,很难转化为生产力。Easy do it 正在突破这一障碍,让提出应用需求的用户直接参与互联网系统开发。只需会html和SQL,就能够完成Web应用系统开发,只需会json和SQL,就能够完成移动App服务器系统开发。这对每一位其他的行业的业务精英来说,简直就是“小菜一碟”,学会html、json和SQL语法远比进一步提高在本行业的业务水平更容易,您的智慧很快被“翻译”成互联网应用系统软件。 • 降低开发成本:无需雇佣高水平高薪的程序员,简化了需求到开发的环节; • 部署成本低:无需复杂的调试和配置; • 集成成本低:支持任何关系数据库(如:Mysql、MSSQL、DB2、Oracle……),可同时支持多个不同数据库,从源头上解决“信息孤岛”问题; • 资源成本低:PIII450/64M/10G以上PC即可高效地运行,基于轻开平台的应用系统,系统本身不再为自身庞大的体积而付出大部分资源,而是把IT资源更有效的服务于应用。 轻开平台干了些啥: 高夫数据分析App服务器:移动App服务器+大数据分析系统(Vertica),网址 http://182.92.150.191/; 通益车联网:移动App(及车载终端)服务器+大数据分析系统(Vertica),网址 http://103.249.252.247/; 达品客电子商务网:电子商务,网址 http://www.dapinke.com/; 北京简单和家官网:电子商务,网址 http://www.52jdhj.co
最近做了一个文章管理的系统,用到在线编辑器,修改了一下现在能实现音频视频,图片,附件,Flash等文件的上传。费了好大的功夫。。 FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NET的FCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。 1. 将FCKeditor加入到项目 解压FCKeditor编辑器,得到文件夹fckeditor,复制此文件夹到Web应用的项目下(也可以是子孙目录下)。 解压FCKeditor控件,在其子目录bin/Release/2.0下有一个程序集。在Web应用的项目引用该程序集。 2. 在页面使用FCKeditor 有两种方式。 (1)手工编码 在页面加入ASP.NET指令: 然后在需要的地方加入FCKeditor控件: (2)集成到Visual Studio工具箱 打开一ASP.NET页面,展开Toolbox,打开右键菜单,选择“Choose Items ...”,在出现的“Choose Toolbox Items”会话框的“.NET Framework Components”选项卡选择“Browse”,找到并选FCKeditor程序集,打开后回到“Choose Toolbox Items”窗口,点击“OK”,完成控件导入。 这时,在Toolbox的General分类下出现了一个名为FCKeditor的控件,可以像使用Visual Studio内置控件一样使用它。 3. 配置FCKeditor编辑器路径 在页面使用的是FCKeditor控件,该控件需要知道FCKeditor编辑器文件组的路径。有两种配置方法。 (1)配置web.config 在appSettings配置节加入 使用这种配置方法后,对于项目任何一个页面用到的FCKeditor控件,都不用再配置其BasePath属性。 (2)直接对用到的FCKeditor控件进行配置 在页面代码设置FCKeditor的属性BasePath为FCKeditor编辑器文件组的路径,或者在Page_Init事件处理器设置其BasePath的值。 4. 配置FCKeditor编辑器文件上传路径 在web.config的appSettings配置节加入 或者 这样,就完成了FCKeditor向ASP.NET页面的集成工作。 二、配置FCKeditor 按照FCKeditor的默认配置,可以完成一些常用的HTML可视化编辑工作,但在实际应用,还需要对其做进一步的配置。FCKeditor控件的可配置属性不多,且配置后只能作用于一个单一实例。实际上,需要对FCKeditor编辑器文件组的通用配置文件/fckconfig.js和ASP.NET专用文件上传管理代码文件/editor/filemanager/connectors/aspx/config.ascx进行配置。 1. 配置控件语言 FCKeditor是自动探测浏览器所使用的语言编码的,其默认语言是英文。修改配置行"FCKConfig.DefaultLanguage = 'en';"为'zh-cn',采用文为默认语言。 2. 配置控件应用技术 FCKeditor默认是用于php技术的。修改配置行"var _FileBrowserLanguage = 'php';"和"var _
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值