`

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

阅读更多

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

1.自己修改

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

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

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

 
找到程序代码

 

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

以下是代码片段:


||/\.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、增加程序代码,这段代码用来判断后缀名

 

 

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属性
以下是代码片段:
SetAttribute( e, 'type', 'application/x-shockwave-flash' ) ;

 

 

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属性

 

 

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

 

 

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,该文件为配置文件

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

以下是代码片段:
FCKConfig.FlashUploadAllowedExtensions = ".(swf)$" ; // empty for all
以下是代码片段:
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)

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代码
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'] //我的按钮的配置,可能和你的不太一样
] ;  
 
找到类似代码添加如下内容
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


分享到:
评论

相关推荐

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

    总结,添加视频和音频功能到FCKeditor 2.6涉及到创建新插件、设计交互对话框、编写处理代码、配置编辑器以及进行充分的测试。这一过程需要对HTML、JavaScript以及FCKeditor的架构有深入的理解,但完成后将极大地提升...

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

    本文将详细讨论如何在FCKeditor 2.6版本中添加插入视频和音频的功能,以及涉及到的相关技术知识点。 首先,我们需要理解FCKeditor的基本架构。FCKeditor由多个组件构成,包括核心编辑器部分、插件系统、皮肤、语言...

    FCKEditor2.6使用小示例

    1. 初始化编辑器:在JavaScript中,使用`new FCKeditor()`创建一个新的编辑器实例,并指定编辑器ID和在页面中的位置,例如: ``` var oFCKeditor = new FCKeditor( 'editor' ) ; oFCKeditor.BasePath = '/...

    fckeditor 2.6 带media插件

    1. **功能介绍**:Media插件是FCKeditor的一个扩展,它的主要任务是帮助用户在编辑器中轻松插入多媒体文件,如视频或音频。通过这个插件,开发者和用户可以直接在编辑器内预览和管理多媒体内容,而无需离开编辑界面...

    FCKeditor_2.6.4.1包

    FCKeditor 2.6.4.1是该编辑器的一个稳定版本,包含了丰富的功能和优化。 1. **FCKeditor简介** FCKeditor由Fernando Gomes创建,起初以Flash为基础,后来发展为完全基于JavaScript的解决方案,支持多种浏览器,...

    FCKeditor2.6 For Java

    **FCKeditor2.6 For Java** 是一个专门为Java开发者设计的开源富文本编辑器,它使得在Web应用中集成富文本输入功能变得更加便捷。FCKeditor是一款强大的在线文本编辑器,支持多种浏览器,包括IE、Firefox、Chrome和...

    FCKeditor 2.6使用

    - **插入媒体**: 支持插入图片、链接、表格、列表、视频和音频等多媒体元素。 - **HTML源码查看**: 用户可以切换到源码模式查看和编辑HTML代码,对高级用户非常有用。 - **撤销/重做**: 提供了撤销和重做操作,方便...

    FCKeditor_2.6

    FCKeditor 2.6是该编辑器的一个重要版本,提供了丰富的功能和改进。 在FCKeditor 2.6中,开发者可以期待以下关键特性: 1. **丰富的文本格式支持**:FCKeditor允许用户应用各种文本格式,如字体、大小、颜色、对齐...

    fckeditor2.3-2.6-java

    这个压缩包主要面向Java开发者,提供了一整套用于在Java环境中集成FCKeditor的类库和资源。 在Java开发中,FCKeditor作为一个强大的文本编辑组件,可以帮助开发者在后台系统中创建内容编辑界面,支持各种格式的文本...

    FCKeditor_2.6.5和中文帮助文档

    FCKeditor 2.6.5是该编辑器的一个特定版本,它在2.6系列中提供了一些关键改进和功能增强。 1. **编辑器界面与功能** - **WYSIWYG(所见即所得)**: FCKeditor 提供了一个直观的界面,让用户在浏览器中看到的文本...

    FCKeditor_2.6.4.1 demo

    这个"2.6.4.1 demo"版本是FCKeditor的一个演示版本,展示了其核心功能和使用方式。 1. **富文本编辑器概述**:FCKeditor是一个JavaScript编写的在线编辑器,支持在网页中创建和编辑复杂格式的文本,包括加粗、斜体...

    FCKeditor_2.6.8.zip

    - **多媒体支持**:除了文本和图片,FCKeditor还支持插入视频、音频等多媒体元素。 - **自定义配置**:开发人员可以根据需求自定义编辑器的外观和功能,例如设置工具栏按钮、语言选项等。 **2. FCKeditor的使用...

    FCKeditor 原版

    - **图片和多媒体支持**:用户可以方便地插入、上传和管理图片、视频、音频等多媒体资源。 - **链接管理**:创建、编辑和删除超链接,支持URL和电子邮件链接。 - **源代码编辑**:对于有HTML知识的用户,可以直接...

    FCKeditor网页嵌入式文本编辑器

    压缩包中的`FckEditor for java 2.6的JSP 配置方法详解.doc`文档,详细阐述了如何在Java环境中配置和使用FCKeditor,包括如何将编辑器与JSP页面结合,以及处理文件上传等操作。`fckeditor-java-2.6-src.zip`和`...

    FckEditor文本编辑

    3. **多媒体支持**:FckEditor允许用户直接在编辑器中插入图片、视频和音频,只需简单几步操作即可完成。同时,它还支持在线上传和本地文件选择,使得媒体内容的管理更为便捷。 4. **链接管理**:创建、编辑和删除...

    faceditor 精简版 最流行的在线编辑器

    同时,FCKeditor 还支持插入音频和视频,丰富了内容的表现形式。 3. **链接创建与管理**:用户可以方便地添加内部和外部链接,同时编辑链接属性,如打开新窗口、链接目标等。 4. **HTML源代码查看与编辑**:对于有...

    JoomlaFCK for J1.5 所见即所得编辑器 2.6.3.9b 多国语言版

    1. **图片和媒体管理**:JoomlaFCK编辑器支持直接在编辑器内上传和管理图片,可以调整大小、添加链接,并且能够嵌入视频和音频。 2. **链接创建**:用户可以直接输入URL创建链接,也可以选择已有的页面或文章链接。...

    富文本控件集合包

    KindEditor支持多语言,具备基本的编辑功能,如字体样式、颜色调整,以及视频和音频的插入。 4. CKEditor:CKEditor是FCKeditor的后续项目,版本4.2.0是其一个稳定版本。它拥有更现代化的界面和更强大的功能集,...

Global site tag (gtag.js) - Google Analytics