• 热门专题

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

作者:礼拜天001  发布日期:2014-09-02 21:01:26
Tag标签:菜单  
  • 相信好多朋友为开源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="' + 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="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', {
                                    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
    可自由引用,但请注明来源,谢谢。
     
About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规