PHPCMS V9编辑器中新增上传视频按钮

发表时间
评论 没有

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

修改步骤(为防止与其它按钮混淆和去除无用插件,这里去除了原编辑器中插入flash和视频的按钮):

  1. 打开statics/js/ckeditor/config.js文件第16行,修改成如下代码:
config.extraPlugins = 'capture,video'; 
  1. 复制statics/js/ckeditor/plugins/目录下的flashplayer目录并修改目录名称为video,然后删除video目录下的player目录。
  1. 修改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' 
        }); 
    } 
}); 
  1. 修改phpcms/libs/classes/form.class.php文件第33行为如下代码:
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['ShowBlocks'],['Image','Capture','video'],['Maximize'], 
  1. 最后在站点管理中允许上传附件类型增加mp4,然后清除浏览器缓存就可以了。

作者
分类 网站建设

评论

本文评论功能已关闭。

← 较早的 较新的 →

相关文章