1. 程式人生 > >給kindeditor編輯器新增FLV上傳播放功能,其中使用flowplayer,適用於大部分版本

給kindeditor編輯器新增FLV上傳播放功能,其中使用flowplayer,適用於大部分版本

最近在做幾個專案都用到編輯器,我以前用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' : '檔案空間',

6、關於 flowplayer的設定

我只取了其中的 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