首页 > 代码库 > kindeditor集成ckplayer(带右键编辑菜单)

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

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

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

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

1.在kindeditor\ckeditor\plugins下新建文件夹insertVideo 

2.将ckplayer文件夹拷贝到kindeditor\ckeditor\plugins\insertVideo下

3.修改kindeditor\kindeditor.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.修改kindeditor\ckeditor\plugins\flash\flash.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="width:60px;">‘ + lang.url + ‘</label>‘,                ‘<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" /> &nbsp;‘,                ‘<input type="button" class="ke-upload-button" value="http://www.mamicode.com/‘ + lang.upload + ‘" /> &nbsp;‘,                ‘<span class="ke-button-common ke-button-outer">‘,                ‘<input type="button" class="ke-button-common ke-button" name="viewServer" value="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/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="http://www.mamicode.com/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 kindeditor\ckeditor\plugins\preview\preview.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="width: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 我们已经完成所有步骤。如需交流 请可加QQ 1297229577
文章出自:http://www.cnblogs.com/libaoting/p/ckplayer.html可自由引用,但请注明来源,谢谢。

 

 

 

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