kindeditor集成ckplayer(带右键编辑菜单)

相信好多朋友为开源web编辑器没有集成视频播放器而烦恼，于是我就是试着修改了一下kindeditor，其实ueditor应该也是同样的，好了不多说了直接上图吧

kindeditor版本： 4.1.7 http://kindeditor.net/

ckplayer 版本：6.4 http://www.ckplayer.com/

1.在kindeditorckeditorplugins下新建文件夹insertVideo 

2.将ckplayer文件夹拷贝到kindeditorckeditorpluginsinsertVideo下

3.修改kindeditorkindeditor.js （目的是增加getpath(url)方法）

在

K.mediaImg = _mediaImg;
K.clearMsWord = _clearMsWord;
K.tmpl = _tmpl;

下方新增一个可调用方法

K.getpath = _getpath;

在

K.formatUrl = _formatUrl;
K.formatHtml = _formatHtml;
K.getCssList = _getCssList;
K.getAttrList = _getAttrList;
K.mediaType = _mediaType;
K.mediaAttrs = _mediaAttrs;
K.mediaEmbed = _mediaEmbed;
K.mediaImg = _mediaImg;
K.clearMsWord = _clearMsWord;
K.tmpl = _tmpl;
K.getpath = _getpath;

上方添加

function _getpath:(z) {
            var d = unescape(window.location.href).replace('file:///', '');
            var k = parseInt(document.location.port);
            var u = document.location.protocol + '//' + document.location.hostname;
            var l = '',e = '',t = '';
            var s = 0;
            var r = z.split('//');
            if (r.length > 0) {
                l = r[0] + '//'
            }
            var h = 'http|https|ftp|rtsp|mms|ftp|rtmp';
            var a = h.split('|');
            if(k!=80){
                u+=':'+k;
            }
            for (i = 0; i < a.length; i++){
                if ((a[i] + '://') == l){
                    s = 1;
                    break;
                }
            }
            if (s == 0) {
                if (z.substr(0, 1) == '/'){
                    t = u + z;
                }
                else {
                    e = d.substring(0, d.lastIndexOf('/') + 1).replace('\', '/');
                    var w = z.replace('../', './');
                    var u = w.split('./');
                    var n = u.length;
                    var r = w.replace('./', '');
                    var q = e.split('/');
                    var j = q.length - n;
                    for (i = 0; i < j; i++) {
                        t += q[i] + '/';
                    }
                    t += r;
                }
            }
            else {
                t = z;
            }
            return t;
        },
        Flash:function(){
            var f=false,v=0;
            if(document.all){
                try {
                    var s=new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
                    f=true;
                    var z=s.GetVariable('$version');
                    v=parseInt(z.split(' ')[1].split(',')[0]);
                }
                catch(e){}
            }
            else{
                if (navigator.plugins && navigator.plugins.length > 0){
                    var s=navigator.plugins['Shockwave Flash'];
                    if (s){
                        f=true;
                        var w = s.description.split(' ');
                        for (var i = 0; i < w.length; ++i){
                            if (isNaN(parseInt(w[i]))) continue;
                                v = parseInt(w[i]);
                            }
                        }
                }
            }
            return {f:f,v:v};
        }

4.修改kindeditorckeditorpluginsflashflash.js为

KindEditor.plugin('flash', function(K) {
    var self = this, name = 'flash', 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="60px;">' + lang.url + '</label>',
                '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="160px;" /> &nbsp;',
                '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;',
                '<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="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="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', {
                                name : 'ke-insertVideo',
                                src : '/kindeditor/plugins/insertVideo/ckplayer/ckplayer.swf',
                                url : url ,
                                width : width,
                                height : height,
                                align : 'middle',
                                wmode : 'transparent',
                                allowfullscreen : 'true',
                                allowscriptaccess : 'always',
                                quality : 'high' ,
                                flashvars : 'f='+url,
                                loop : 'true',
                                type : 'application/x-shockwave-flash'
                            });
                        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=media'),
                    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 : 'media',
                            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.url);
                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);
});

5.修改浏览js kindeditorckeditorpluginspreviewpreview.js为

KindEditor.plugin('preview', function(K) {
    var self = this, name = 'preview', undefined;
    self.clickToolbar(name, function() {
        var lang = self.lang(name + '.'),
            html = '<div style="padding:10px 20px;">' +
                '<iframe class="ke-textarea" frameborder="0" style="708px;height:400px;"></iframe>' +
                '</div>',
            dialog = self.createDialog({
                name : name,
                width : 750,
                title : self.lang(name),
                body : html
            }),
            iframe = K('iframe', dialog.div),
            doc = K.iframeDoc(iframe);
            var _html = self.fullHtml();
            _html.replace(/<embed[^>]*name="?ke-insertVideo"?[^>]*>/ig, function(tag) {
                var flashvars=    K(tag).attr('flashvars');
                var url= K(tag).attr('url');
                url='f='+ K.getpath(url);
                _html = _html.replace(flashvars,url);
                return _html;
            });
        doc.open();
        doc.write(_html);
        doc.close();
        K(doc.body).css('background-color', '#FFF');
        iframe[0].contentWindow.focus();
    });
});

kindeditor集成ckplayer已经完成。以上是http协议的视频加载方式。

若想改成rtmp协议形式，可留言说明，在此就不说明了

关于ckplayer的配置说明不是本章重点，因此暂不说明。可在ckplayer官网http://www.ckplayer.com/找到。

so 我们已经完成所有步骤。

文章出自：http://www.cnblogs.com/libaoting/p/ckplayer.html
可自由引用，但请注明来源，谢谢。