脚本宝典收集整理的这篇文章主要介绍了html5教程-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)

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能全部内容，希望文章能够帮你解决html5教程-Kindeditor(版本号4.0.5)编辑器添加上传flv视频功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。