KindEditor&ckplayer的简单结合

最新推荐文章于 2023-05-19 10:41:33 发布

weixin_34087301

最新推荐文章于 2023-05-19 10:41:33 发布

阅读量160

点赞数

原文链接：https://my.oschina.net/thau/blog/603680

版权

为什么80%的码农都做不了架构师？>>>

原贴发表在我的个人博客haha.tk | Ha?Have a Talk!上，转载请注明出处，谢谢。

链接

ckplayer 6.7：http://www.ckplayer.com/bbs/forum.php?mod=viewthread&tid=10864

KindEditor4.1.10 (2013-11-23)：http://kindeditor.net/down.php

参考教程：关于kindeditor整合万能的ckplayer视频播放器插件

因项目需要，现将KindEditor与ckplayer相结合，利用ckplayer播放由KindEditor富文本编辑器上传至服务器的视频。

KindEditor

KindEditor的安装与配置这里不做多余介绍，具体参考《官方文档-编辑器使用方法》。

ckplayer的配置

上传相关文件到编辑器的插件目录即editor/plugins/ckplayer，基本的文件包括ckplayer.js、ckplayer.swf、ckplayer.xml、language.xml和style.css。

修改格式验证代码

修改kindeditor.js的960行左右的上传功能的格式验证代码，加入需要支持的视频格式：

    function _mediaType(src) {
        if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
            return 'audio/x-pn-realaudio-plugin';
        }
        if (/\.(swf|flv|mp4)(\?|$)/i.test(src)) {
            return 'application/x-shockwave-flash';
        }
        return 'video/x-ms-asf-plugin';
    }

修改jsp/upload_json.jsp的32行左右的上传功能的格式验证代码，加入需要支持的视频格式：

    //定义允许上传的文件扩展名
    HashMap<String, String> extMap = new HashMap<String, String>();
    extMap.put("image", "gif,jpg,jpeg,png,bmp");
    extMap.put("flash", "swf,flv,mp4");
    extMap.put("media",
            "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,mp4");
    extMap.put("file",
            "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

ckplayer官方称支持以下视频格式：

视频协议	视频格式	Flash	HTML5
HTTP	flv	g.jpg	x.jpg
HTTP	f4v	g.jpg	x.jpg
HTTP	mp4	g.jpg	g.jpg
HTTP	m3u8	g.jpg	g.jpg
HTTP	webm	x.jpg	g.jpg
HTTP	ogg	x.jpg	g.jpg
RTMP	flv	g.jpg	x.jpg
RTMP	f4v	g.jpg	x.jpg
RTMP	mp4	g.jpg	x.jpg
RTMP	直播流	g.jpg	x.jpg

所以其中要添加什么类型的文件记得在两个文件都修改。

修改embed标签代码

ckplayer播放本地视频的原理是调用ckplayer.swf打开本地的视频，下面的修改kindeditor.js中983行左右embed标签相关的代码，加入ckplayer可以识别的参数flashvars：

    function _mediaEmbed(attrs) {
        var html = '<embed ';
        _each(attrs, function(key, val) {
            if (key == 'src') {
                html += key + '="' + K.options.pluginsPath
                        + 'ckplayer/ckplayer.swf" ' + 'flashvars="f=' + localhostPath + val
                        + '" ';
            } else {
                html += key + '="' + val + '" ';
            }
        });
        html += '/>';
        return html;
    }

注意

大约在kindeditor.js的300行左右，会有如下代码：

embed : [ 'id', 'class', 'src', 'width', 'height', 'type', 'loop',
                    'autostart', 'quality', '.width', '.height', 'align',
                    'allowscriptaccess','flashvars' ],

这段代码表示的是embed标签里的属性名，记得添加ckplayer专用的代表本地视频地址的flashvars参数，否则在KindEditor编辑器将代码转换成HTML代码时，embed标签中的其它参数会被省略。修改之后，当插入视频时，将会生成如下代码其中flashvars的其它参数可以通过&来连接更多的参数，如控制自动播放的p参数。

<embed src="http://localhost:8080/editor/plugins/ckplayer/ckplayer.swf" flashvars="f=/attached/flash/20160116/20160116131808_254.mp4" type="application/x-shockwave-flash" width="550" height="400" quality="high" />

其他

还有一些关于编辑器和优化如下：

修改上传提示

修改editor/plugins/flash/flash.js，在html参数中如添加诸如一下代码，引导管理员更好的使用上传本地视频的功能。

            var html = [
                '<div style="padding:20px;">',
                //url
                '<div class="ke-dialog-row">',
                '<div style="color:red">',
                '本地视频上传详见<a href="http://haha.tk"  target="_blank" >《教程吧啦吧啦》</a>',
                '</div>',
                '<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>',