2014-04-15 14:51:05  浏览:3203

CKEditor HTML5 Video 插件

CKEditor 4.2 只能增加flash播放格式,没有视频插件。

这个插件允许插入和编辑新的HTML5<video>元素。该对话框允许指定的海报图像,尺寸(他们是根据预览自动调整)和两个源文件,

这样既使用了WebM格式(Chrome浏览器,Firefox和Opera),并且只支持H264的那些浏览器(IE9和Safari浏览器)可以查看您的视频。 


安装步骤

1. 复制到CKEditor 下的"plugins"文件夹
2.然后配置 CKEditor的(config.js) 文件,加入下面的代码,意思是引入插件:

config.extraPlugins = 'video';

如果之前已经引入过其他插件,可以用逗号隔开,表示两个插件


config.extraPlugins = 'fmath_formula,video';


3.在toolbar 配置中,加入“Video” 项(注意:V要dax),例如:

config.toolbar = [
	    { name: 'tools', items: ['Maximize', 'ShowBlocks','Source' ] },
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
		{ name: 'forms', items: [  'TextField','Select' ] },
		{ name: 'insert', items: [ 'Image', 'Flash','Video', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak','fmath_formula' ] }
		
	];

更多信息,查看doc下的install.doc文件。


【修改bug】

之前版本,可以成功添加video,也可以保存到服务器,但是编辑的时候,video和source里面的属性就不翼而飞了,如果再次点保存,得到的结果就是“你的浏览器不支持此播放器.<br>请直接下载文件”。


【修订代码】

修改videoplugin.js 

原来:

editor.addCommand( 'Video', new CKEDITOR.dialogCommand( 'video') );
修改为
 //包含属性的标签,也可以增加自定义属性。
var b = "video[controls,id,height,poster,width];source[src,type]";
editor.addCommand( 'Video', new CKEDITOR.dialogCommand( 'video', {
            allowedContent: b,//允许的内容
            requiredContent: "video"
        } ) );

顺便汉化了一下,现在有一个遗憾,就是没加上传代码。

点此下载

返回首页