給kindeditor編輯器新增FLV上傳播放功能，其中使用flowplayer，適用於大部分版本
阿新 • • 發佈：2019-02-19
最近在做幾個專案都用到編輯器，我以前用eWebEditor，按照網上的方法也增加了FLV上傳播放的功能。
這次想換個編輯器，看上了kindeditor。
使用過程中，發現上傳FLV檔案後不能自動播放，百度了幾個修改的攻略：
看到評論就沒嘗試這個方法了。
博主介紹的是4.0.5的修改方法，他也修改了4.1.4的，但現在最新版本是4.1.10，有點強迫症的人會使用新版本。於是我也就忽略了這個方法。
3.其它還有些低版本別人修改好的打包檔案，我沒試。
我嘗試了，沒成功。
在我嘗試了好幾次，研究了幾番之後，成功了。可以看到這個帖子我的回覆得到提示。但要注意程式中編輯器的路徑。而且帖子中的播放器使用了後沒有進度條之類的工具條，經過我幾番研究搜尋嘗試，加上了。
所以以下程式碼基於kindeditor-4.1.10和部落格園的帖子修改。
1、在plugin下建立資料夾flvplayer, 建立flvplayer.js檔案
原始碼如下
/******************************************************************************* * KindEditor - WYSIWYG HTML Editor for Internet * Copyright (C) 2006-2011 kindsoft.net * * @author Roddy <[email protected]> * @site http://www.kindsoft.net/ * @licence http://www.kindsoft.net/license.php * 再次修改：by tmouse 2014.4.7 *******************************************************************************/ KindEditor.plugin('flvplayer', function(K) { var self = this, name = 'flvplayer', lang = self.lang(name + '.'), allowFlashUpload = K.undef(self.allowFlashUpload, true), allowFileManager = K.undef(self.allowFileManager, false), formatUploadUrl = K.undef(self.formatUploadUrl, true), extraParams = K.undef(self.extraFileUploadParams, {}), filePostName = K.undef(self.filePostName, 'imgFile'), uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'); self.plugin.flash = { edit : function() { var html = [ '<div style="padding: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, 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; } // var html = K.mediaImg(self.themesPath + 'common/blank.gif', { // src : url, // type : K.mediaType('.swf'), // width : width, // height : height, // quality : 'high' // }); var html='<script src="kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer-3.2.11.min.js"></script>'; html += '<a href="'+url+'" style="display:block;width:'+width+'px;height:'+height+'px;margin-left:auto;margin-right:auto" id="player"> </a>'; //html+='<script language="JavaScript">flowplayer("player", "kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer- 3.2.15.swf");</script>'; html+='<script language="JavaScript">var player=flowplayer("player","kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer- 3.2.16.swf",{plugins:{pseudo:{url:"kindeditor-4.1.10/plugins/flvplayer/flowplayer/flowplayer.pseudostreaming-3.2.12.swf"},controls:{autoHide: {fullscreenOnly:true,hideDelay:2000},height:30,scrubber:true,buttonColor:"rgba(0, 0, 0, 0.9)",buttonOverColor:"#000000",backgroundGradient:"medium",backgroundColor:"#D7D7D7",sliderColor:"#2c2c2c",bufferColor:"#606060",progressColor:"#056e9f",sli derBorder:"1px solid #808080",sliderHeight:20,volumeSliderColor:"#FFFFFF",volumeBorder:"1px solid #808080",timeColor:"#000000",durationColor:"#535353",tooltips:{buttons:true,play:"播放",fullscreen:"全屏",fullscreenExit:"退出全屏",pause:"暫停",mute:"靜 音",unmute:"取消靜音"}}},onStart:function(clip){animate(this,{bottom:31})},onFullscreen:function(){},onFullscreenExit:function(){},onBegin:function() {}});</script>'; 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 (allowFlashUpload) { var uploadbutton = K.uploadbutton({ button : K('.ke-upload-button', div)[0], fieldName : filePostName, extraParams : extraParams, url : K.addParam(uploadJson, 'dir=flvplayer'), afterUpload : function(data) { dialog.hideLoading(); if (data.error === 0) { var url = data.url; if (formatUploadUrl) { url = K.formatUrl(url, 'absolute'); } urlBox.val(url); if (self.afterUpload) { self.afterUpload.call(self, url, data, name); } 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(); } if (allowFileManager) { viewServerBtn.click(function(e) { self.loadPlugin('filemanager', function() { self.plugin.filemanagerDialog({ viewType : 'LIST', dirName : 'flvplayer', clickFn : function(url, title) { if (self.dialogs.length > 1) { K('[name="url"]', div).val(url); if (self.afterSelectFile) { self.afterSelectFile.call(self, url); } self.hideDialog(); } } }); }); }); } else { viewServerBtn.hide(); } var img = self.plugin.getSelectedFlash(); 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.getSelectedFlash().remove(); } }; self.clickToolbar(name, self.plugin.flash.edit); });
這裡面的var html=''經過我的修改，分成3句，後一個script經過http://js.clicki.cc/美化成一行，也增加了工具條的功能。
可能複製過來換成多行了，需要自行修改成一行！切記！！！
2、在themes\default\default.css這個檔案末尾增加樣式：
.ke-icon-flvplayer {
background-position: 0px -512px;
width: 16px;
height: 16px;
}3、預設外掛呼叫增加
修改kindeditor.js檔案
items : 裡面 'flash' 後增加 'flvplayer'
在htmlTags裡增加：
script:['src','language'], 我是在最前面font前加的。因為編輯器採用了白名單過濾，在第1處裡的Html這個變數裡使用了script程式碼。
4、關於上傳和檔案管理 的伺服器指令碼修改（以asp.net為例）
修改upload_json.ashx檔案
在對應地方增加 extTable.Add("flvplayer", "flv,f4v,mp4");
修改file_manager_json.ashx檔案
修改某處為if (Array.IndexOf("image,flash,media,file,flvplayer".Split(','), dirName) == -1)，也就是增加 flvplayer這個目錄名
5、修改語言包lang資料夾下的zh_CN.js檔案
對應flash兩處的下方新增
第一處：
flvplayer : 'FLV視訊',
第二處：
'flash.viewServer' : '檔案空間',
'flvplayer.url' : 'URL',
'flvplayer.width' : '寬度',
'flvplayer.height' : '高度',
'flvplayer.upload' : '上傳',
'flvplayer.viewServer' : '檔案空間',
我只取了其中的 var player 這段，同時下載了裡面提到的播放器所要用到的4個檔案到本地。裡面使用了flowplayer-3.2.16.swf，但同時還要下載低一個版本的flowplayer.controls-3.2.15.swf到對應的資料夾，還有flowplayer.pseudostreaming-3.2.12.swf和flowplayer-3.2.12.min.js
經過這幾步，就可以上傳播放flv等視訊了，這應該是最全的方法了吧？
修改後的kindeditor-4.1.10增加FLV上傳播放功能檔案可以在csdn資源下載裡搜尋關鍵詞 kindeditor-4.1.10