PHPCMS V9编辑器中新增上传视频(上传视频并插入HTML5的video标签)的功能

由于PHPCMS v9默认的编辑器中上传的视频插入的是embed标签使用的是flash播放器,手机端无法播放,所以来改造下,让其上传视频并插入HTML5的video标签,这样电脑端的主流浏览器和手机端能都播放,当然也可以参考本文修改进而支持ckplayer、cuplayer等播放器。

修改步骤(为防止与其它按钮混淆和去除无用插件,这里去除了原编辑器中插入flash和视频的按钮):
一、打开statics/js/ckeditor/config.js文件第16行,修改成如下代码:

config.extraPlugins = 'capture,video';

二、复制statics/js/ckeditor/plugins/目录下的flashplayer目录并修改目录名称为video,然后删除video目录下的player目录。

三、修改statics/js/ckeditor/plugins/video/目录下的plugin.js文件为如下代码:

CKEDITOR.plugins.add('video', {
    init: function(editor) {
        //plugin code goes here
        var pluginName = 'video';
        CKEDITOR.dialog.add('video',  function(a) {
            var b = a.config;
            var  escape  =   function(value) {        
                return  value;    
            };    
            return  {        
                title:   '插入MP4视频',
                        resizable:  CKEDITOR.DIALOG_RESIZE_BOTH,
                        minWidth: 350,
                minHeight: 200,
                        contents:  [{          
                    id: 'info',
                    label: '常规',
                    accessKey: 'P',
                    elements: [{
                        type: 'hbox',
                        widths: ['80%', '20%'],
                        children: [{
                            id: 'src',
                            type: 'text',
                            label: '源文件'
                        }, {
                            type: 'button',
                            id: 'browse',
                            filebrowser: 'info:src',
                            hidden: true,
                            align: 'center',
                            label: '浏览服务器'
                        }]
                    }]
                }, {
                    id: 'Upload',
                    hidden: true,
                    filebrowser: 'uploadButton',
                    label: '上传视频',
                    elements: [{
                        type: 'file',
                        id: 'upload',
                        label: '上传视频',
                        size: 38
                    }, {
                        type: 'fileButton',
                        id: 'uploadButton',
                        label: '上传到服务器上',
                        filebrowser: 'info:src',
                        'for': ['Upload', 'upload'] //'page_id', 'element_id'
                    }]        
                }],
                        onOk:   function() { 
                    mysrc  =  this.getValueOf('info',  'src');         
                    html  =  ''  +  escape(mysrc)  +  '';                               
                    a.insertHtml("<video src=\""  +  html  +  "\" controls=\"controls\">您的浏览器版本过低,请先升级。</video>");        
                },
                        onLoad:   function() {        }    
            };
        });
        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
        editor.ui.addButton('video', {
            label: '插入mp4视频',
            command: pluginName,
            icon: this.path + 'icon.png'
        });
    }
});

四、修改phpcms/libs/classes/form.class.php文件第33行为如下代码:

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['ShowBlocks'],['Image','Capture','video'],['Maximize'],

五、最后清除浏览器缓存就可以了。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大海哪蓝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值