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

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

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

[html] view plain copy
 
  1. <embed src="/upload/201210/22/201210221043235781.flv" type="application/x-shockwave-flash" width="550" height="400" quality="high" />  

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

[html] view plain copy
 
  1. <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] view plain copy
 
  1. .ke-icon-flv {  
  2.   
  3.        background-position: 0px -1232px;  
  4.   
  5.        width: 16px;  
  6.   
  7.        height: 16px;  
  8.   
  9. }   


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

[javascript] view plain copy
 
  1. flash: 'Flash',  

并在其下边添加代码

[javascript] view plain copy
 
  1. flv: 'Flv',  

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

[javascript] view plain copy
 
  1. /******************************************************************************* 
  2.  
  3. * KindEditor - WYSIWYG HTML Editor for Internet 
  4.  
  5. * Copyright (C) 2006-2011 kindsoft.net 
  6.  
  7. * 
  8.  
  9. * @author juhnpen <juhnpen@qq.com> 
  10.  
  11. * @site http://www.kindsoft.net/ 
  12.  
  13. * @licence http://www.kindsoft.net/license.php 
  14.  
  15. *******************************************************************************/  
  16.   
  17.    
  18.   
  19. KindEditor.plugin('flv', function (K) {  
  20.   
  21.     var self = this, name = 'flv', lang = self.lang(name + '.'),  
  22.   
  23.               allowFlvUpload = K.undef(self.allowFlvUpload, true),  
  24.   
  25.               allowFileManager = K.undef(self.allowFileManager, false),  
  26.   
  27.               uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');  
  28.   
  29.     self.plugin.flv = {  
  30.   
  31.         edit: function () {  
  32.   
  33.             var html = [  
  34.   
  35.                             '<div style="padding:10px 20px;">',  
  36.   
  37.             //url  
  38.   
  39.                             '<div class="ke-dialog-row">',  
  40.   
  41.                             '<label for="keUrl" style="width:60px;">' + lang.url + '</label>',  
  42.   
  43.                             '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" />  ',  
  44.   
  45.                             '<input type="button" class="ke-upload-button" value="' + lang.upload + '" />  ',  
  46.   
  47.                             '<span class="ke-button-common ke-button-outer">',  
  48.   
  49.                             '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',  
  50.   
  51.                             '</span>',  
  52.   
  53.                             '</div>',  
  54.   
  55.             //width  
  56.   
  57.                             '<div class="ke-dialog-row">',  
  58.   
  59.                             '<label for="keWidth" style="width:60px;">' + lang.width + '</label>',  
  60.   
  61.                             '<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" /> ',  
  62.   
  63.                             '</div>',  
  64.   
  65.             //height  
  66.   
  67.                             '<div class="ke-dialog-row">',  
  68.   
  69.                             '<label for="keHeight" style="width:60px;">' + lang.height + '</label>',  
  70.   
  71.                             '<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" /> ',  
  72.   
  73.                             '</div>',  
  74.   
  75.                             '</div>'  
  76.   
  77.                      ].join('');  
  78.   
  79.             var dialog = self.createDialog({  
  80.   
  81.                 name: name,  
  82.   
  83.                 width: 450,  
  84.   
  85.                 height: 200,  
  86.   
  87.                 title: self.lang(name),  
  88.   
  89.                 body: html,  
  90.   
  91.                 yesBtn: {  
  92.   
  93.                     name: self.lang('yes'),  
  94.   
  95.                     click: function (e) {  
  96.   
  97.                         var url = K.trim(urlBox.val()),  
  98.   
  99.                                                  width = widthBox.val(),  
  100.   
  101.                                                  height = heightBox.val();  
  102.   
  103.                         if (url == 'http://' || K.invalidUrl(url)) {  
  104.   
  105.                             alert(self.lang('invalidUrl'));  
  106.   
  107.                             urlBox[0].focus();  
  108.   
  109.                             return;  
  110.   
  111.                         }  
  112.   
  113.                         if (!/^\d*$/.test(width)) {  
  114.   
  115.                             alert(self.lang('invalidWidth'));  
  116.   
  117.                             widthBox[0].focus();  
  118.   
  119.                             return;  
  120.   
  121.                         }  
  122.   
  123.                         if (!/^\d*$/.test(height)) {  
  124.   
  125.                             alert(self.lang('invalidHeight'));  
  126.   
  127.                             heightBox[0].focus();  
  128.   
  129.                             return;  
  130.   
  131.                         }  
  132.   
  133.                         //删除修改flv是增加的str字符  
  134.   
  135.    
  136.   
  137.                         var str = '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=';  
  138.   
  139.                         if (url.indexOf(str)>=0) {  
  140.   
  141.                             var last = url.substring(url.indexOf(str) + str.length, url.length);  
  142.   
  143.                             url = last;  
  144.   
  145.                         }  
  146.   
  147.    
  148.   
  149.                         var html = K.mediaImg(self.themesPath + 'common/blank.gif', {  
  150.   
  151.                             src: '/editor/plugins/flv/swf/Flvplayer.swf?vcastr_file=' + url,  
  152.   
  153.                             type: 'application/x-shockwave-flash',  
  154.   
  155.                             width: width,  
  156.   
  157.                             height: height,  
  158.   
  159.                             quality: 'high',  
  160.   
  161.                             allowfullscreen: 'true'  
  162.   
  163.                         });  
  164.   
  165.                         self.insertHtml(html).hideDialog().focus();  
  166.   
  167.                     }  
  168.   
  169.                 }  
  170.   
  171.             }),  
  172.   
  173.                      div = dialog.div,  
  174.   
  175.                      urlBox = K('[name="url"]', div),  
  176.   
  177.                      viewServerBtn = K('[name="viewServer"]', div),  
  178.   
  179.                      widthBox = K('[name="width"]', div),  
  180.   
  181.                      heightBox = K('[name="height"]', div);  
  182.   
  183.             urlBox.val('http://');  
  184.   
  185.    
  186.   
  187.             if (allowFlvUpload) {  
  188.   
  189.                 var uploadbutton = K.uploadbutton({  
  190.   
  191.                     button: K('.ke-upload-button', div)[0],  
  192.   
  193.                     fieldName: 'imgFile',  
  194.   
  195.                     url: K.addParam(uploadJson, 'dir=flv'),  
  196.   
  197.                     afterUpload: function (data) {  
  198.   
  199.                         dialog.hideLoading();  
  200.   
  201.                         if (data.error === 0) {  
  202.   
  203.                             var url = K.formatUrl(data.url, 'absolute');  
  204.   
  205.                             urlBox.val(url);  
  206.   
  207.                             if (self.afterUpload) {  
  208.   
  209.                                 self.afterUpload.call(self, url);  
  210.   
  211.                             }  
  212.   
  213.                             alert(self.lang('uploadSuccess'));  
  214.   
  215.                         } else {  
  216.   
  217.                             alert(data.message);  
  218.   
  219.                         }  
  220.   
  221.                     },  
  222.   
  223.                     afterError: function (html) {  
  224.   
  225.                         dialog.hideLoading();  
  226.   
  227.                         self.errorDialog(html);  
  228.   
  229.                     }  
  230.   
  231.                 });  
  232.   
  233.                 uploadbutton.fileBox.change(function (e) {  
  234.   
  235.                     dialog.showLoading(self.lang('uploadLoading'));  
  236.   
  237.                     uploadbutton.submit();  
  238.   
  239.                 });  
  240.   
  241.             } else {  
  242.   
  243.                 K('.ke-upload-button', div).hide();  
  244.   
  245.                 urlBox.width(250);  
  246.   
  247.             }  
  248.   
  249.    
  250.   
  251.             if (allowFileManager) {  
  252.   
  253.                 viewServerBtn.click(function (e) {  
  254.   
  255.                     self.loadPlugin('filemanager', function () {  
  256.   
  257.                         self.plugin.filemanagerDialog({  
  258.   
  259.                             viewType: 'LIST',  
  260.   
  261.                             dirName: 'flv',  
  262.   
  263.                             clickFn: function (url, title) {  
  264.   
  265.                                 if (self.dialogs.length > 1) {  
  266.   
  267.                                     K('[name="url"]', div).val(url);  
  268.   
  269.                                     self.hideDialog();  
  270.   
  271.                                 }  
  272.   
  273.                             }  
  274.   
  275.                         });  
  276.   
  277.                     });  
  278.   
  279.                 });  
  280.   
  281.             } else {  
  282.   
  283.                 viewServerBtn.hide();  
  284.   
  285.             }  
  286.   
  287.    
  288.   
  289.             var img = self.plugin.getSelectedFlv();  
  290.   
  291.             if (img) {  
  292.   
  293.                 var attrs = K.mediaAttrs(img.attr('data-ke-tag'));  
  294.   
  295.                 urlBox.val(attrs.src);  
  296.   
  297.                 widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);  
  298.   
  299.                 heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);  
  300.   
  301.             }  
  302.   
  303.             urlBox[0].focus();  
  304.   
  305.             urlBox[0].select();  
  306.   
  307.         },  
  308.   
  309.         'delete': function () {  
  310.   
  311.             self.plugin.getSelectedFlv().remove();  
  312.   
  313.         }  
  314.   
  315.     };  
  316.   
  317.     self.clickToolbar(name, self.plugin.flv.edit);  
  318.   
  319. });  


6.       修改kindeditor.js文件，找到代码

[javascript] view plain copy
 
  1. items: [  
  2.   
  3.               'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',  
  4.   
  5.               'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',  
  6.   
  7.               'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  
  8.   
  9.               'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',  
  10.   
  11.               'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',  
  12.   
  13.               'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',  
  14.   
  15.               'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'  


将其修改为

[javascript] view plain copy
 
  1. items: [  
  2.   
  3.               'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',  
  4.   
  5.               'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',  
  6.   
  7.               'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  
  8.   
  9.               'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',  
  10.   
  11.               'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',  
  12.   
  13.               'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',  
  14.   
  15.               'flash', 'flv', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'  


也就是在'flash',后边添加'flv',代码。

7.       修改kindeditor.js文件，找到function _mediaType(src)方法，将其里边的代码修改成下边代码：

 

[javascript] view plain copy
 
  1. function _mediaType(src) {  
  2.   
  3.         if (/\.(rm|rmvb)(\?|$)/i.test(src)) {  
  4.   
  5.             return 'audio/x-pn-realaudio-plugin';  
  6.   
  7.        }  
  8.   
  9.         if (/\.(flv)(\?|$)/i.test(src)) {  
  10.   
  11.             return 'application/x-shockwave-flv';  
  12.   
  13.         }  
  14.   
  15.         if (/\.(swf)(\?|$)/i.test(src)) {  
  16.   
  17.             return 'application/x-shockwave-flash';  
  18.   
  19.         }  
  20.   
  21.         return 'video/x-ms-asf-plugin';  
  22.   
  23.     }  

 

8.       修改kindeditor.js文件，找到function _mediaType(src)方法，将其改为如下：

[javascript] view plain copy
 
  1. function _mediaClass(type) {  
  2.   
  3.         if (/realaudio/i.test(type)) {  
  4.   
  5.             return 'ke-rm';  
  6.   
  7.         }  
  8.   
  9.         if (/flash/i.test(type)) {  
  10.   
  11.             return 'ke-flash';  
  12.   
  13.         }  
  14.   
  15.         if (/flv/i.test(type)) {  
  16.   
  17.             return 'ke-flv';  
  18.   
  19.         }  
  20.   
  21.         return 'ke-media';  
  22.   
  23.     }  


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] view plain copy
 
  1. 'img.ke-flash {',  
  2.   
  3.               '      border:1px solid #AAA;',  
  4.   
  5.               '      background-image:url(' + themesPath + 'common/flash.gif);',  
  6.   
  7.               '      background-position:center center;',  
  8.   
  9.               '      background-repeat:no-repeat;',  
  10.   
  11.               '      width:100px;',  
  12.   
  13.               '      height:100px;',  
  14.   
  15.               '}',  


   下边添加代码：

[javascript] view plain copy
 
  1. 'img.ke-flv {',  
  2.   
  3.               '      border:1px solid #AAA;',  
  4.   
  5.               '      background-image:url(' + themesPath + 'common/flv.gif);',  
  6.   
  7.               '      background-position:center center;',  
  8.   
  9.               '      background-repeat:no-repeat;',  
  10.   
  11.               '      width:100px;',  
  12.   
  13.               '      height:100px;',  
  14.   
  15.               '}',  


11.   修改kindeditor.js文件，找到代码

[javascript] view plain copy
 
  1. self.plugin.getSelectedFlash = function () {  
  2.   
  3.             return _getImageFromRange(self.edit.cmd.range, function (img) {  
  4.   
  5.                 return img[0].className == 'ke-flash';  
  6.   
  7.             });  
  8.   
  9.         };  


在其下边添加如下代码：

[javascript] view plain copy
 
  1. self.plugin.getSelectedFlv = function () {  
  2.   
  3.             return _getImageFromRange(self.edit.cmd.range,function (img) {  
  4.   
  5.                 return img[0].className =='ke-flv';  
  6.   
  7.             });  
  8.   
  9.         };  


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图片

 

 

posted on 2017-11-08 14:03  FrankChia  阅读(279)  评论(0)    收藏  举报

导航