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 = [
'p style="padding:10px 20px;
">
',
//url
'p 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>
',
'/p>
',
//width
'p 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" />
',
'/p>
',
//height
'p 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" />
',
'/p>
',
'/p>
'
].join('');
var dialog = self.createDialog({
name: name,
width: 450,
height: 200,
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;
}
//删除修改flv是增加的str字符
var str = '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=';
if (url.indexOf(str)>
=0) {
var last = url.substring(url.indexOf(str) + str.length, url.length);
url = last;
}
var html = K.mediaimg(self.themesPath + 'common/blank.gif', {
src: '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=' + url,
type: 'application/x-shockwave-flash',
width: width,
height: height,
quality: 'high',
allowfullscreen: 'true'
}
);
self.insertHtml(html).hideDialog().focus();
}
}
}
),
p = dialog.p,
urlBox = K('[name="url"]', p),
viewServerBtn = K('[name="viewServer"]', p),
widthBox = K('[name="width"]', p),
heightBox = K('[name="height"]', p);
urlBox.val('http://');
if (allowFlvUpload) {
var uploadbutton = K.uploadbutton({
button: K('.ke-upload-button', p)[0],
fieldName: 'imgFile',
url: K.addParam(uploadJson, 'dir=flv'),
afterUpload: function (data) {
dialog.hideLoading();
if (data.error === 0) {
var url = K.formatUrl(data.url, 'absolute');
urlBox.val(url);
if (self.afterUpload) {
self.afterUpload.call(self, url);
}
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', p).hide();
urlBox.width(250);
}
if (allowFileManager) {
viewServerBtn.click(function (e) {
self.loadPlugin('filemanager', function () {
self.plugin.filemanagerDialog({
viewType: 'LIST',
dirName: 'flv',
clickFn: function (url, title) {
if (self.dialogs.length >
1) {
K('[name="url"]', p).val(url);
self.hideDialog();
}
}
}
);
}
);
}
);
}
else {
viewServerBtn.hide();
}
var img = self.plugin.getSelecteDFlv();
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.getSelectedFlv().remove();
}
}
;
self.clickToolbar(name, self.plugin.flv.edit);
}
);
6. 修改kindeditor.js文件，找到代码
[javascript]
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'PRint', 'template', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
将其修改为
[javascript]
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'flash', 'flv', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
也就是在'flash',后边添加'flv',代码。
7. 修改kindeditor.js文件，找到function _mediaType(src)方法，将其里边的代码修改成下边代码：
[javascript]
if (//.(rm|rmvb)(/?|$)/i.test(src)) {
return 'audio/x-pn-realaudio-plugin';
}
if (//.(flv)(/?|$)/i.test(src)) {
return 'application/x-shockwave-flv';
}
if (//.(swf)(/?|$)/i.test(src)) {
return 'application/x-shockwave-flash';
}
return 'video/x-ms-asf-plugin';
}
8. 修改kindeditor.js文件，找到function _mediaType(src)方法，将其改为如下：
[javascript]
function _mediaClass(type) {
if (/realaudio/i.test(type)) {
return 'ke-rm';
}
if (/flash/i.test(type)) {
return 'ke-flash';
}
if (/flv/i.test(type)) {
return 'ke-flv';
}
return 'ke-media';
}
9. 修改kindeditor.js文件，找到function _mediaImg(blankPath, attrs)方法，将其里边的type = attrs.type || _mediaType(attrs.src)改为type = _mediaType(attrs.src)
10. 修改kindeditor.js文件，找到_getInitHtml(themesPath, bodyClass, cssPath, cSSData)方法，在代码
[javascript]
' border:1px solid #AAA;
',
' background-image:url(' + themesPath + 'common/flash.gif);
',
' background-position:center center;
',
' background-repeat:no-repeat;
',
' width:100px;
',
' height:100px;
',
'}
',
下边添加代码：
[javascript]
'img.ke-flv {
',
' border:1px solid #AAA;
',
' background-image:url(' + themesPath + 'common/flv.gif);
',
' background-position:center center;
',
' background-repeat:no-repeat;
',
' width:100px;
',
' height:100px;
',
'}
',
11. 修改kindeditor.js文件，找到代码
[javascript]
self.plugin.getSelectedFlash = function () {
return _getImageFromRange(self.edit.cmd.range, function (img) {
return img[0].classname == 'ke-flash';
}
);
}
;
在其下边添加如下代码：
[javascript]
self.plugin.getSelectedFlv = function () {
return _getImageFromRange(self.edit.cmd.range,function (img) {
return img[0].className =='ke-flv';
}
);
}
;
12. 修改kindeditor.js文件，找到代码_each('link,image,flash,media,anchor'.split(','), function (i, name)，将其修改为_each('link,image,flash,flv,media,anchor'.split(','), function (i, name)
13. 修改kindeditor.js文件，找到代码return html.replace(/img[^>
]*class="?ke-(flash|rm|media)"?[^>
]*>
/ig, function (full)，将其修改为return html.replace(/img[^>
]*class="?ke-(flash|flv|rm|media)"?[^>
]*>
/ig, function (full)
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 = [
'p style="padding:10px 20px;
">
',
//url
'p 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>
',
'/p>
',
//width
'p 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" />
',
'/p>
',
//height
'p 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" />
',
'/p>
',
'/p>
'
].join('');
var dialog = self.createDialog({
name: name,
width: 450,
height: 200,
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;
}
//删除修改flv是增加的str字符
var str = '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=';
if (url.indexOf(str)>
=0) {
var last = url.substring(url.indexOf(str) + str.length, url.length);
url = last;
}
var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src: '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=' + url,
type: 'application/x-shockwave-flash',
width: width,
height: height,
quality: 'high',
allowfullscreen: 'true'
}
);
self.insertHtml(html).hideDialog().focus();
}
}
}
),
p = dialog.p,
urlBox = K('[name="url"]', p),
viewServerBtn = K('[name="viewServer"]', p),
widthBox = K('[name="width"]', p),
heightBox = K('[name="height"]', p);
urlBox.val('http://');
if (allowFlvUpload) {
var uploadbutton = K.uploadbutton({
button: K('.ke-upload-button', p)[0],
fieldName: 'imgFile',
url: K.addParam(uploadJson, 'dir=flv'),
afterUpload: function (data) {
dialog.hideLoading();
if (data.error === 0) {
var url = K.formatUrl(data.url, 'absolute');
urlBox.val(url);
if (self.afterUpload) {
self.afterUpload.call(self, url);
}
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', p).hide();
urlBox.width(250);
}
if (allowFileManager) {
viewServerBtn.click(function (e) {
self.loadPlugin('filemanager', function () {
self.plugin.filemanagerDialog({
viewType: 'LIST',
dirName: 'flv',
clickFn: function (url, title) {
if (self.dialogs.length >
1) {
K('[name="url"]', p).val(url);
self.hideDialog();
}
}
}
);
}
);
}
);
}
else {
viewServerBtn.hide();
}
var img = self.plugin.getSelectedFlv();
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.getSelectedFlv().remove();
}
}
;
self.clickToolbar(name, self.plugin.flv.edit);
}
);
6. 修改kindeditor.js文件，找到代码
[javascript]
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
将其修改为
[javascript]
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'flash', 'flv', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
也就是在'flash',后边添加'flv',代码。
7. 修改kindeditor.js文件，找到function _mediaType(src)方法，将其里边的代码修改成下边代码：
[javascript]
if (//.(rm|rmvb)(/?|$)/i.test(src)) {
return 'audio/x-pn-realaudio-plugin';
}
if (//.(flv)(/?|$)/i.test(src)) {
return 'application/x-shockwave-flv';
}
if (//.(swf)(/?|$)/i.test(src)) {
return 'application/x-shockwave-flash';
}
return 'video/x-ms-asf-plugin';
}
8. 修改kindeditor.js文件，找到function _mediaType(src)方法，将其改为如下：
[javascript]
function _mediaClass(type) {
if (/realaudio/i.test(type)) {
return 'ke-rm';
}
if (/flash/i.test(type)) {
return 'ke-flash';
}
if (/flv/i.test(type)) {
return 'ke-flv';
}
return 'ke-media';
}
9. 修改kindeditor.js文件，找到function _mediaImg(blankPath, attrs)方法，将其里边的type = attrs.type || _mediaType(attrs.src)改为type = _mediaType(attrs.src)
10. 修改kindeditor.js文件，找到_getInitHtml(themesPath, bodyClass, cssPath, cssData)方法，在代码
[javascript]
' border:1px solid #AAA;
',
' background-image:url(' + themesPath + 'common/flash.gif);
',
' background-position:center center;
',
' background-repeat:no-repeat;
',
' width:100px;
',
' height:100px;
',
'}
',
下边添加代码：
[javascript]
'img.ke-flv {
',
' border:1px solid #AAA;
',
' background-image:url(' + themesPath + 'common/flv.gif);
',
' background-position:center center;
',
' background-repeat:no-repeat;
',
' width:100px;
',
' height:100px;
',
'}
',
11. 修改kindeditor.js文件，找到代码
[javascript]
self.plugin.getSelectedFlash = function () {
return _getImageFromRange(self.edit.cmd.range, function (img) {
return img[0].className == 'ke-flash';
}
);
}
;
在其下边添加如下代码：
[javascript]
self.plugin.getSelectedFlv = function () {
return _getImageFromRange(self.edit.cmd.range,function (img) {
return img[0].className =='ke-flv';
}
);
}
;
12. 修改kindeditor.js文件，找到代码_each('link,image,flash,media,anchor'.split(','), function (i, name)，将其修改为_each('link,image,flash,flv,media,anchor'.split(','), function (i, name)
13. 修改kindeditor.js文件，找到代码return html.replace(/img[^>
]*class="?ke-(flash|rm|media)"?[^>
]*>
/ig, function (full)，将其修改为return html.replace(/img[^>
]*class="?ke-(flash|flv|rm|media)"?[^>
]*>
/ig, function (full)
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能
本文地址： https://pptw.com/jishu/586516.html