给kindeditor编辑器添加FLV上传播放功能，其中使用flowplayer，适用于大部分版本

最近在做几个项目都用到编辑器，我以前用eWebEditor，按照网上的方法也增加了FLV上传播放的功能。

这次想换个编辑器，看上了kindeditor。

使用过程中，发现上传FLV文件后不能自动播放，百度了几个修改的攻略：

1.首先是kindereditor交流中心的一个帖子：http://kindeditor.net/view.php?bbsid=7&postid=7275

看到评论就没尝试这个方法了。

2.其次是csdn的一个帖子：http://blog.csdn.net/tangjunping/article/details/8098003

博主介绍的是4.0.5的修改方法，他也修改了4.1.4的，但现在最新版本是4.1.10，有点强迫症的人会使用新版本。于是我也就忽略了这个方法。

3.其它还有些低版本别人修改好的打包文件，我没试。

4.也是csdn的一个帖子，他修改了两处简单的地方http://blog.csdn.net/zhjx922/article/details/7601660

我尝试了，没成功。

5.博客园的帖子。http://www.cnblogs.com/henshui/archive/2013/02/06/2903610.html

在我尝试了好几次，研究了几番之后，成功了。可以看到这个帖子我的回复得到提示。但要注意程序中编辑器的路径。而且帖子中的播放器使用了后没有进度条之类的工具条，经过我几番研究搜索尝试，加上了。

所以以下代码基于kindeditor-4.1.10和博客园的帖子修改。

1、在plugin下建立文件夹flvplayer, 建立flvplayer.js文件源码如下

/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
* 再次修改：by tmouse 2014.4.7
*******************************************************************************/KindEditor.plugin('flvplayer', function(K) {var self = this, name = 'flvplayer', lang = self.lang(name + '.'),allowFlashUpload = K.undef(self.allowFlashUpload, true),allowFileManager = K.undef(self.allowFileManager, false),formatUploadUrl = K.undef(self.formatUploadUrl, true),extraParams = K.undef(self.extraFileUploadParams, {}),filePostName = K.undef(self.filePostName, 'imgFile'),uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');self.plugin.flash = {edit : function() {var html = ['<div style="padding:20px;">',//url'<div class="ke-dialog-row">','<label for="keUrl" style="width:60px;">' + lang.url + '</label>','<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" />  ','<input type="button" class="ke-upload-button" value="' + lang.upload + '" />  ','<span class="ke-button-common ke-button-outer">','<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />','</span>','</div>',//width'<div class="ke-dialog-row">','<label for="keWidth" style="width:60px;">' + lang.width + '</label>','<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" /> ','</div>',//height'<div class="ke-dialog-row">','<label for="keHeight" style="width:60px;">' + lang.height + '</label>','<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" /> ','</div>','</div>'].join('');var dialog = self.createDialog({name : name,width : 450,title : self.lang(name),body : html,yesBtn : {name : self.lang('yes'),click : function(e) {var url = K.trim(urlBox.val()),width = widthBox.val(),height = heightBox.val();if (url == 'http://' || K.invalidUrl(url)) {alert(self.lang('invalidUrl'));urlBox[0].focus();return;}if (!/^\d*$/.test(width)) {alert(self.lang('invalidWidth'));widthBox[0].focus();return;}if (!/^\d*$/.test(height)) {alert(self.lang('invalidHeight'));heightBox[0].focus();return;}//  var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
//                              src : url,
//                              type : K.mediaType('.swf'),
//                              width : width,
//                              height : height,
//                              quality : 'high'
//                          });var html='<script src="kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer-3.2.11.min.js"></script>';html += '<a href="'+url+'" style="display:block;width:'+width+'px;height:'+height+'px;margin-left:auto;margin-right:auto" id="player">    </a>';//html+='<script language="JavaScript">flowplayer("player", "kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer-3.2.15.swf");</script>';                 html+='<script language="JavaScript">var player=flowplayer("player","kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer-3.2.16.swf",{plugins:{pseudo:{url:"kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer.pseudostreaming-3.2.12.swf"},controls:{autoHide:{fullscreenOnly:true,hideDelay:2000},height:30,scrubber:true,buttonColor:"rgba(0, 0, 0, 0.9)",buttonOverColor:"#000000",backgroundGradient:"medium",backgroundColor:"#D7D7D7",sliderColor:"#2c2c2c",bufferColor:"#606060",progressColor:"#056e9f",sliderBorder:"1px solid #808080",sliderHeight:20,volumeSliderColor:"#FFFFFF",volumeBorder:"1px solid #808080",timeColor:"#000000",durationColor:"#535353",tooltips:{buttons:true,play:"播放",fullscreen:"全屏",fullscreenExit:"退出全屏",pause:"暂停",mute:"静音",unmute:"取消静音"}}},onStart:function(clip){animate(this,{bottom:31})},onFullscreen:function(){},onFullscreenExit:function(){},onBegin:function(){}});</script>';self.insertHtml(html).hideDialog().focus();}}}),div = dialog.div,urlBox = K('[name="url"]', div),viewServerBtn = K('[name="viewServer"]', div),widthBox = K('[name="width"]', div),heightBox = K('[name="height"]', div);urlBox.val('http://');if (allowFlashUpload) {var uploadbutton = K.uploadbutton({button : K('.ke-upload-button', div)[0],fieldName : filePostName,extraParams : extraParams,url : K.addParam(uploadJson, 'dir=flvplayer'),afterUpload : function(data) {dialog.hideLoading();if (data.error === 0) {var url = data.url;if (formatUploadUrl) {url = K.formatUrl(url, 'absolute');}urlBox.val(url);if (self.afterUpload) {self.afterUpload.call(self, url, data, name);}alert(self.lang('uploadSuccess'));} else {alert(data.message);}},afterError : function(html) {dialog.hideLoading();self.errorDialog(html);}});uploadbutton.fileBox.change(function(e) {dialog.showLoading(self.lang('uploadLoading'));uploadbutton.submit();});} else {K('.ke-upload-button', div).hide();}if (allowFileManager) {viewServerBtn.click(function(e) {self.loadPlugin('filemanager', function() {self.plugin.filemanagerDialog({viewType : 'LIST',dirName : 'flvplayer',clickFn : function(url, title) {if (self.dialogs.length > 1) {K('[name="url"]', div).val(url);if (self.afterSelectFile) {self.afterSelectFile.call(self, url);}self.hideDialog();}}});});});} else {viewServerBtn.hide();}var img = self.plugin.getSelectedFlash();if (img) {var attrs = K.mediaAttrs(img.attr('data-ke-tag'));urlBox.val(attrs.src);widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);}urlBox[0].focus();urlBox[0].select();},'delete' : function() {self.plugin.getSelectedFlash().remove();}};self.clickToolbar(name, self.plugin.flash.edit);
});

这里面的var html=''经过我的修改，分成3句，后一个script经过http://js.clicki.cc/美化成一行，也增加了工具条的功能。

可能复制过来换成多行了，需要自行修改成一行！切记！！！

2、在themes\default\default.css这个文件末尾增加样式：

.ke-icon-flvplayer {background-position: 0px -512px;width: 16px;height: 16px;
}

3、默认插件调用增加

修改kindeditor.js文件

items : 里面 'flash' 后增加 'flvplayer'

在htmlTags里增加：
script:['src','language'], 我是在最前面font前加的。因为编辑器采用了白名单过滤，在第1处里的Html这个变量里使用了script代码。

4、关于上传和文件管理的服务器脚本修改（以asp.net为例）

修改upload_json.ashx文件
在对应地方增加 extTable.Add("flvplayer", "flv,f4v,mp4");

修改file_manager_json.ashx文件
修改某处为if (Array.IndexOf("image,flash,media,file,flvplayer".Split(','), dirName) == -1)，也就是增加 flvplayer这个目录名

5、修改语言包lang文件夹下的zh_CN.js文件
对应flash两处的下方添加
第一处：
flvplayer : 'FLV视频',

第二处：
'flash.viewServer' : '文件空间',
'flvplayer.url' : 'URL',
'flvplayer.width' : '宽度',
'flvplayer.height' : '高度',
'flvplayer.upload' : '上传',
'flvplayer.viewServer' : '文件空间',

6、关于 flowplayer的设置

我找来找去，找到了http://chenxiuheng.iteye.com/blog/1880484这个帖子

我只取了其中的 var player 这段，同时下载了里面提到的播放器所要用到的4个文件到本地。里面使用了flowplayer-3.2.16.swf，但同时还要下载低一个版本的flowplayer.controls-3.2.15.swf到对应的文件夹，还有flowplayer.pseudostreaming-3.2.12.swf和flowplayer-3.2.12.min.js

经过这几步，就可以上传播放flv等视频了，这应该是最全的方法了吧？

修改后的kindeditor-4.1.10增加FLV上传播放功能文件可以在csdn资源下载里搜索关键词 kindeditor-4.1.10

给kindeditor编辑器添加FLV上传播放功能，其中使用flowplayer，适用于大部分版本相关推荐

kindeditor上传图片php,Kindeditor编辑器添加图片上传水印功能（php代码）
KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框.可以无缝地与 Java..NET.PH ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
ckeidtor编辑器添加图片上传功能
1.ckeditor默认没有上传图片功能,只能通过Url显示图片,图下图 2.首先说明,ckeditor是有上传功能的,只是隐藏了,需要通过配置让它显示找到ckeditor/plugins/imag ...
edui 富文本编辑_富文本编辑器wangEditor添加本地上传视频功能
最近做一个考试系统,编辑题目要用到富文本编辑,要求可以添加图片.视频和pdf.此前项目中用的都是wangEditor,使用的时候发现只可以上传本地图片,视频只能添加链接,找了其他插件,也没发现比较好用 ...
在KindEditor中编辑可上传MP4
mp4视频格式上传: 找到 kindeditor-all.js 在 htmlTags 配置中添加: video : ['id', 'class', 'src', 'width', 'height', ...
springboot 整合文本编辑器（图片上传）
Ueditor 文件上传配置: ueditor.config.js serverUrl:填写自己的路径 jsp->config.json: imageActionName:填写自己写的文件上传的 ...
mavon-editor编辑器与图片上传
mavon-editor编辑器与图片上传图片上传是一个常用的功能,今天我们来实现基于Vue的Markdown编辑器--mavon-editor的图片上传功能. 一.安装与引入 1. 首先在命令行安装 ...
JavaWeb富文本编辑器与文件上传
目录一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用二.文件上传文件上传必须要注意的规则: 文件上传案例文件夹的访问一.富文本编辑器富文本编辑器在项目中很常见,它可以将文本, ...

给kindeditor编辑器添加FLV上传播放功能，其中使用flowplayer，适用于大部分版本

给kindeditor编辑器添加FLV上传播放功能，其中使用flowplayer，适用于大部分版本相关推荐

最新文章

热门文章