由于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("您的浏览器版本过低,请先升级。");

},

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'],

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

php 编辑器 插入视频,苗景云的博客-PHPCMS V9编辑器中新增上传mp4视频(上传视频并插入HTML5的video标签)的功能...相关推荐

  1. php插入音乐代码,如何修改Wordpress博客代码在文章中插入音乐 | 垃圾站

    垃圾站博客昨天在网上看到有一篇通过修改Wordpress博客代码在文章中插入音乐的教程,特此整理编辑后分享给大家,教程如下: 1.下载swf播放器(点击下载:player.swf )上传到Wordpr ...

  2. 【开源】博客园文章编辑器4.0版发布

    源起 最近个人时间多起来了: 于是打算持续写一点东西: 前面写了两篇关于riot.js的东西: 被博客园的领导移出首页了: 原因之一是排版不整齐: 确实是不整齐,这我认, 然而,我自己可是博客园文章编 ...

  3. markdown mysql高亮_修改博客园markdown编辑器代码高亮风格的方法

    作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式 ...

  4. 蜻蜓短视频系统-文件上传之本地上传报错问题解决-蜻蜓Q蜻蜓s蜻蜓系统上传采用本地上传报错Class ‘League\Flysystem\Adapter\Local‘ not found

    蜻蜓短视频系统-文件上传之本地上传报错问题解决-蜻蜓Q蜻蜓s蜻蜓系统上传采用本地上传报错 蜻蜓系统有本地上传方式和云储存上传方式,云方式比较常用是不会有错的,本地上传方式可能会遇到这样的报错. 报错1 ...

  5. tinymce 多图上传,上传文件,上传视频,单图上传

    tinymce 多图上传,上传文件,上传视频,单图上传 参考材料 引入插件 单图上传,文件上传,图片上传 多图上传 参考材料 http://tinymce.ax-z.cn/more-plugins/a ...

  6. 微信小程序云开发博客系统源代码,让写博客像发朋友圈一样简单,含使用部署教程

    博客就两种:一是随笔,记录自己的成长历程,二是有目的的发文,例如搬运各种网赚文,我想大部分朋友做博客的初衷都是有一块自己的心灵净土,于是催生了wxapp-blog这款小程序. 完整代码下载地址:微信小 ...

  7. 帝国cms后台上传大视频上传m3u8批量上传一次多个的解决思路和方法

    今天我们要解决的问题是,大视频文件上传以及切片m3u8文件的上传.上面一节内容,我们已经整体描述了视频类网站的解决思路和方法 .这节我们将分块来讲.假设的前提条件是,我们本地准备了一些视频原始素材,比 ...

  8. 让博客园的编辑器自动上传外链图片

    让博客园的编辑器自动上传外链图片 我经常翻译国外的文章,遇到这么个需求.如果要翻译的文章中包含了图片,那么复制到博客园的时候图片肯定是引用原网站的了.如果原网站是个人博客(任何时候域名都可能失效),或 ...

  9. [云炬小程序实战笔记] 第3章 云炬博客小程序全局配置

    app.json {"pages": ["pages/index/index", //首頁"pages/category/category" ...

最新文章

  1. 10张图带你深入理解Docker容器和镜像--云平台技术栈07
  2. python 最快 因式分解_python中怎么对一个数进行因式分解?
  3. C#中对文件File常用操作方法的工具类
  4. java 得到checkbox_【JavaWeb】获得选中的checkbox的value
  5. 摆脱困境:将属性值注入配置Bean
  6. keras框架:目标检测Faster-RCNN思想及代码
  7. 12无法使用otg_12个冷知识:或许只能看看而无法使用,但却真实存在着
  8. Android usb 权限广播,android10.0 USB弹窗权限流程解析
  9. shellinabox基于web浏览器的终端模拟器
  10. java core 之 异常处理详解
  11. 文件删不掉需要管理员权限?分享解决方法
  12. 蓝牙耳机连接了电脑但是声音外放的解决办法
  13. JS港澳台身份证校验
  14. uniApp 实现微信小程序和app视频播放flv格式视频监控
  15. [KMP]zoj 3587:Marlon's String
  16. bpmn不带网关的流程
  17. Spring Cloud 系列之 Alibaba Nacos 注册中心(一)
  18. 文字图片滚动代码-无缝滚动,强!!!
  19. HWSD全球土壤数据下载处理
  20. 「前端」微信获取openId,静默授权与非静默授权

热门文章

  1. 弘辽科技:拼多多主图不能换吗?怎么做吸引人?
  2. python人工智能课程实例_python人工智能AI深度学习/机器学习全套课程 视频教程+ppt+代码...
  3. requests库(正则提取)爬取千图网
  4. PC端判断屏幕宽度到达手机宽度的时候,直接跳转手机页面
  5. 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)
  6. android歌词效果,Android 天天动听 悬浮歌词(迷你歌词)效果解读
  7. ocr文字识别如何识别文字?
  8. MySQL基础测试题(今日作业)
  9. C/C++ 相关低耦合代码的设计
  10. matlab三元一次,急!!!用matlab怎么解三元一次方程