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

本文转载

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

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

1.自己修改

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

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

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

找到程序代码

以下是代码片段： Js代码 ||//.swf($|#|/?)/i.test(A.src) Js代码 ||//.swf($|#|/?)/i.test(A.src)

这段代码的主要用来判断后缀名，如果后缀名不是swf则返回，把它替换为:

以下是代码片段： Js代码 ||//.swf($|#|/?)/i.test(A.src)||//.mpg($|#|/?)/i.test(A.src) ||//.asf($|#|/?)/i.test(A.src)||//.wma($|#|/?)/i.test(A.src) ||//.wmv($|#|/?)/i.test(A.src)||//.avi($|#|/?)/i.test(A.src) ||//.mov($|#|/?)/i.test(A.src)||//.mp3($|#|/?)/i.test(A.src) ||//.rmvb($|#|/?)/i.test(A.src)||//.mid($|#|/?)/i.test(A.src) Js代码 ||//.swf($|#|/?)/i.test(A.src)||//.mpg($|#|/?)/i.test(A.src) ||//.asf($|#|/?)/i.test(A.src)||//.wma($|#|/?)/i.test(A.src) ||//.wmv($|#|/?)/i.test(A.src)||//.avi($|#|/?)/i.test(A.src) ||//.mov($|#|/?)/i.test(A.src)||//.mp3($|#|/?)/i.test(A.src) ||//.rmvb($|#|/?)/i.test(A.src)||//.mid($|#|/?)/i.test(A.src)

文件格式可以根据情况来修改，但是注意要和其他的几个地方吻合

二、打开/editor/dialog/fck_flash/fck_flash.js

1、增加程序代码，这段代码用来判断后缀名

Js代码

function WinPlayer(url){

var r, re;

re = /.(avi|wmv|asf|wma|mid|mp3|mpg)$/i;

r = url.match(re);

return r;

}

function RealPlayer(url){

var r, re;

re = /.(.rm|.ra|.rmvb|ram)$/i;

r = url.match(re);

return r;

}

function QuickTime(url){

var r, re;

re = /.(mov|qt)$/i;

r = url.match(re);

return r;

}

function FlashPlayer(url){

var r, re;

re = /.swf$/i;

r = url.match(re);

return r;

}

Js代码

function WinPlayer(url){

var r, re;

re = /.(avi|wmv|asf|wma|mid|mp3|mpg)$/i;

r = url.match(re);

return r;

}

function RealPlayer(url){

var r, re;

re = /.(.rm|.ra|.rmvb|ram)$/i;

r = url.match(re);

return r;

}

function QuickTime(url){

var r, re;

re = /.(mov|qt)$/i;

r = url.match(re);

return r;

}

function FlashPlayer(url){

var r, re;

re = /.swf$/i;

r = url.match(re);

return r;

}

以下是代码片段：

2、替换程序代码，这段代码是在UpdatePreview中用来添加type属性

以下是代码片段： Js代码 SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ; Js代码 SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;

为

Js代码

if(WinPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'application/x-mplayer2' ) ;

}

if(RealPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'audio/x-pn-realaudio-plugin' ) ;

}

if(QuickTime(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'application/video/quicktime' ) ;

}

if(FlashPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;

SetAttribute( e, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer ' ) ;

}

Js代码

if(WinPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'application/x-mplayer2' ) ;

}

if(RealPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'audio/x-pn-realaudio-plugin' ) ;

}

if(QuickTime(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'application/video/quicktime' ) ;

}

if(FlashPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;

SetAttribute( e, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer ' ) ;

}

以下是代码片段：

3、替换程序代码，这段代码是在UpdateEmbed中用来添加type属性

Js代码

SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;

SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;

Js代码

SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;

SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;

以下是代码片段：

为

Js代码

if(WinPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'application/x-mplayer2' ) ;

SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;

}

if(RealPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'audio/x-pn-realaudio-plugin' ) ;

SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;

}

if(QuickTime(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'video/quicktime' ) ;

SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;

}

if(FlashPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;

SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;

}

Js代码

if(WinPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'application/x-mplayer2' ) ;

SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;

}

if(RealPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'audio/x-pn-realaudio-plugin' ) ;

SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;

}

if(QuickTime(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'video/quicktime' ) ;

SetAttribute( e, 'autostart', GetE('chkAutoPlay').checked ? 'true' : 'false' ) ;

}

if(FlashPlayer(GetE('txtUrl').value)!=null){

SetAttribute( e, 'type' , 'application/x-shockwave-flash' ) ;

SetAttribute( e, 'pluginspage' , 'http://www.macromedia.com/go/getflashplayer ' ) ;

}

以下是代码片段：

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

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

以下是代码片段： Js代码 FCKConfig.FlashUploadAllowedExtensions = ".(swf)$" ; // empty for all Js代码 FCKConfig.FlashUploadAllowedExtensions = ".(swf)$" ; // empty for all

为

以下是代码片段： Js代码 FCKConfig.FlashUploadAllowedExtensions = ".(swf|fla|mpg|asf|wma|wmv|avi|mov|mp3|rmvb|mid)$" ; // empty for all Js代码 FCKConfig.FlashUploadAllowedExtensions = ".(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代码

connector.resourceType.flash.extensions.allowed

= swf|fla|mpg|asf|wma|wmv|avi|mov|mp3|rmvb|mid

Java代码

connector.resourceType.flash.extensions.allowed

= 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代码

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //找到这一句，配置插件路径

FCKConfig.Plugins.Add( 'Media', 'en,zh,zh-cn' ) ; //启用插件

………… //中间代码省略

FCKConfig.ToolbarSets["Default"] = [

['Source','Templates'],

['FontName','FontSize'],

['TextColor','BGColor'],

['Image','Flash'], //可以用Media替换Flash

['Table','Rule'],

['FitWindow','ShowBlocks'],

['Smiley','SpecialChar','Media'], //或者加入Media按钮

'/',

['PasteText','PasteWord','RemoveFormat'],

['Undo','Redo','Find','Replace'],

['Bold','Italic','Underline','StrikeThrough'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight'],

['Anchor','Link','Unlink'] //我的按钮的配置，可能和你的不太一样

] ;

Js代码

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //找到这一句，配置插件路径

FCKConfig.Plugins.Add( 'Media', 'en,zh,zh-cn' ) ; //启用插件

………… //中间代码省略

FCKConfig.ToolbarSets["Default"] = [

['Source','Templates'],

['FontName','FontSize'],

['TextColor','BGColor'],

['Image','Flash'], //可以用Media替换Flash

['Table','Rule'],

['FitWindow','ShowBlocks'],

['Smiley','SpecialChar','Media'], //或者加入Media按钮

'/',

['PasteText','PasteWord','RemoveFormat'],

['Undo','Redo','Find','Replace'],

['Bold','Italic','Underline','StrikeThrough'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight'],

['Anchor','Link','Unlink'] //我的按钮的配置，可能和你的不太一样

] ;

找到类似代码添加如下内容

Js代码

FCKConfig.MediaUpload = true ;

FCKConfig.MediaUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' +

_QuickUploadLanguage + '/upload.' + _QuickUploadLanguage + '?Type=Media' ;

FCKConfig.MediaUploadAllowedExtensions = ".(avi|asf)$" ; // empty for all

FCKConfig.MediaUploadDeniedExtensions = "" ; // empty for no one

Js代码

FCKConfig.MediaUpload = true ;

FCKConfig.MediaUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' +

_QuickUploadLanguage + '/upload.' + _QuickUploadLanguage + '?Type=Media' ;

FCKConfig.MediaUploadAllowedExtensions = ".(avi|asf)$" ; // empty for all

FCKConfig.MediaUploadDeniedExtensions = "" ; // empty for no one

下载地址：http://dev.fckeditor.net/ticket/382