Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能

来源：互联网发布：win8 mac地址查询编辑：程序博客网时间：2024/05/22 12:06

很多人遇到url为空的情况是由于版本不同造成的。如果版本不是4.0.5,那采用这种方式改动是会报这样那样的错误的。如果你的版本是4.1.4，建议去http://download.csdn.net/detail/tangjunping/4816104直接下载4.1.4我已改好的demo.

Kindeditor编辑器是挺好用的，可是上传的flv视频文件在前台是无法访问的。到底是什么问题，先看看通过该编辑器上传的flv视频文件的源代码：

<embed src="/upload/201210/22/201210221043235781.flv" type="application/x-shockwave-flash" width="550" height="400" quality="high" />

分析一下上边的代码，这是播放swf文件的代码，而要在网页里边播放flv视频文件，需要加载一个播放器了,如果把上边代码改成如下代码：

<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样式，在其下边添加一段新的样式，代码如下：

.ke-icon-flv {       background-position: 0px -1232px;       width: 16px;       height: 16px;}

4. 修改lang文件夹下的zh_CN.js文件，找到

flash: 'Flash',

并在其下边添加代码

flv: 'Flv',

5. plugins文件夹下新建文件夹flv，并在flv文件夹下再新添加一个文件夹swf,把播放flv文件的swf文件Flvplayer.swf拷贝到该文件夹下，在flv文件夹里新添加flv.js文件。代码如下：

/******************************************************************************** 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">',                            '<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,                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();                    }                }            }),                     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 (allowFlvUpload) {                var uploadbutton = K.uploadbutton({                    button: K('.ke-upload-button', div)[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', div).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"]', div).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文件，找到代码

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'

将其修改为

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)方法，将其里边的代码修改成下边代码：

function _mediaType(src) {        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)方法，将其改为如下：

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)方法，在代码

'img.ke-flash {',              '      border:1px solid #AAA;',              '      background-image:url(' + themesPath + 'common/flash.gif);',              '      background-position:center center;',              '      background-repeat:no-repeat;',              '      width:100px;',              '      height:100px;',              '}',

下边添加代码：

'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文件，找到代码

self.plugin.getSelectedFlash = function () {            return _getImageFromRange(self.edit.cmd.range, function (img) {                return img[0].className == 'ke-flash';            });        };

在其下边添加如下代码：

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)

通过上边13步修改之后，现在的Kindeditor就多了一个上传flv视频文件的功能。效果如下：

前台网页看到的效果

注：点击此处下载源代码

用到的Flvplayer：点此下载

用到的flv.gif素材

修改后的default.png图片