Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能
Kindeditor编辑器是挺好用的,可是上传的flv视频文件在前台是无法访问的。到底是什么问题,先看看通过该编辑器上传的flv视频文件的源代码:
[html]
<embed src="/upload/201210/22/201210221043235781.flv" type="application/x-shockwave-flash" width="550" height="400" quality="high" />
分析一下上边的代码,这是播放swf文件的代码,而要在网页里边播放flv视频文件,需要加载一个播放器了,如果把上边代码改成如下代码:
[html]
<embed src="/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=/upload/201210/19/201210191854485625.flvtype="application/x-shockwave-flash" width="550" height="400" quality="high" />
就可以在网页中正常访问了,分析一下这段代码中的src,就是访问Flvplayer.swf播放器并通过该播放器加载相应的flv视频文件,这样才可以在网页中正常打开flv视频文件。下边就介绍如何在Kindeditor编辑器中添加该功能。
1. 在\themes\common文件夹下新添加flv标志的图片flv.gif。
2. 修改\themes\default\default.png图片,在其底部添加flv图标。
3. 在编辑器功能菜单中显示添加flv文件的菜单,修改\themes\default\default.css文件,找到.ke-icon-flash样式,在其下边添加一段新的样式,代码如下:
[css]
.ke-icon-flv {
background-position: 0px -1232px;
width: 16px;
height: 16px;
}
4. 修改lang文件夹下的zh_CN.js文件,找到
[javascript]
flash: 'Flash',
并在其下边添加代码
[javascript]
flv: 'Flv',
5. plugins文件夹下新建文件夹flv,并在flv文件夹下再新添加一个文件夹swf,把播放flv文件的swf文件Flvplayer.swf拷贝到该文件夹下,在flv文件夹里新添加flv.js文件。代码如下:
[javascript]
/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author juhnpen <juhnpen@qq.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/
KindEditor.plugin('flv', function (K) {
var self = this, name = 'flv', lang = self.lang(name + '.'),
allowFlvUpload = K.undef(self.allowFlvUpload, true),
allowFileManager = K.undef(self.allowFileManager, false),
uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');
self.plugin.flv = {
edit: function () {
var html = [
'<div style="padding:10px 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">',
&n
补充:web前端 , HTML 5 ,