文档章节

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

 大东家
发布于 2015/01/13 10:29
字数 1538
阅读 20
收藏 0

本文转载

在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

© 著作权归作者所有

粉丝 22
博文 255
码字总数 111936
作品 0
长沙
项目经理
私信 提问
FCKeditor在线文本编辑器初级应用

首先从FCKeditor的官网( http://www.fckeditor.net/)下载该编辑器,我下载的版本是FCKeditor2.6.6,然后新建一JavaWeb项目,命名为5.3。然后把解压后的fckeditor文件夹复制到项目的WebConten...

藍色的海
2011/11/26
329
0
fckeditor_for_java的用法

在很多时候都需要使用网页编辑器,包括在文章发布的时候或是在表单设计的时候。下面为fckeditor的使用。 以javascript方法调用 方法(一) 将fckeditor.jar包拷贝到webroot目录下,新建一html文...

xinlll
2012/11/18
94
0
FCKeditor 网页编辑器漏洞手册(全面版)

FCKeditor FCKeditor编辑器页/查看编辑器版本/查看文件上传路径 FCKeditor编辑器页 FCKeditor/samples/default.html 查看编辑器版本 FCKeditor/whatsnew.html 查看文件上传路径 fckeditor/ed...

五味格子
2011/05/11
181
0
ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 【月儿原创】

ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.4.9 FCKeditor是目前最好的html文本编辑器,如果还不明白的话看了下图就知道了...

晨曦之光
2012/03/09
87
0
添加 FCKeditor编辑器

1、进入后台: 管理-》内容写作-》Wysiwyg profiles-》Installation instructions 2、下载FCKeditor: 找到-》FCKeditor,点击下载; 3、根据提示信息,将FCKeditor放到下面指定的目录中: ...

jackguo
2013/04/06
137
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部