ckeditor添加插入flv视频的插件
昨天写在网页中播放flv的博文的时候,想在博文中插入视频,但是发现无法实现。
因为用的编辑器是ckeditor,决定自己写个插件插入视频。
官方的教程在这里,写得很好,又简明又清楚。
写一个插件需要建立的文件夹和文件如图所示:
主目录video(此目录名即插件名)要放到ckeditor的plugins文件夹下,其中包含最主要的文件plugin.js。
如果需要对话框,则需要dialogs文件夹和与插件同名的js文件,本例中即video.js。
图标放在icons文件夹下,命名为xxx.png,大小为16*16像素。
主文件plugin.js内容如下:
CKEDITOR.plugins.add( 'video', {
icons: 'video',
init: function( editor ) {
editor.addCommand( 'video', new CKEDITOR.dialogCommand( 'videoDialog' ) );
editor.ui.addButton( 'Video', {
label: '视频',
command: 'video',
toolbar: 'insert'
});
CKEDITOR.dialog.add( 'videoDialog', this.path + 'dialogs/video.js' );
}
});
其中涉及“video”的地方基于约定都要与插件名保持一致,不要挑战这个约定,毫无必要且毫无意义。
弹出对话框文件video.js内容如下:
CKEDITOR.dialog.add( 'videoDialog', function ( editor ) {
return {
title: '视频属性',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'flv',
label: 'VIDEO URL',
elements: [
{
type: 'text',
id: 'flvLink',
label: '输入视频路径',
validate: CKEDITOR.dialog.validate.notEmpty( "视频路径不能为空!" )
}
]
}
],
onOk: function() {
var dialog = this;
var url = dialog.getValueOf('flv', 'flvLink');
var video = editor.document.createElement( 'video' );
video.setAttribute('src', url);
editor.insertElement( video );
}
};
});
其中contents定义对话框中的选项卡和表单项,onOk是点击对话框的“确定”按钮时触发的回调函数。
显然onOk这个函数是重中之重。最关键的有两个步骤:
1)从对话框表单中取值,即示例代码中的var url = dialog.getValueOf('flv', 'flvLink');
2)向编辑器中插入内容,即示例代码中的editor.insertElement( video );
这两个步骤要根据具体需要自行实现。
插件编写完成后在页面js中显式引入之即可:
CKEDITOR.replace( 'editor', {
language: 'zh-cn',
extraPlugins : 'video'
} );
示例代码已上传到github。
TODO:目前只能插入指定url的视频,视频上传没做,可以仿照图片上传的功能来实现。
ckeditor添加插入flv视频的插件的更多相关文章
- ckeditor添加代码插入功能及高亮显示(插件)
Auto SyntaxHighlighter SyntaxHighlighter CKEditor Button 下载以上两个插件,启用 以下可有可无: (设置在编辑器的显示样式) ckeditor高 ...
- Unity3d:使用uWebKit插件嵌入网页,网页中的flv视频无法播放
问题描述:unity3d程序,使用uWebKit插件嵌入网页,用来播放FLV视频,有的电脑可以正常播放,有的电脑在网页中播放不了ps:网页中的播放器用的是player.swf解决方案:是由于网页中的播 ...
- windows下flv视频网站进度条随意拖放[转]
网站中视频都转换成flv格式,奈何flv格式无法拖拽,此问题纠结了好久,最终得以解决.现将解决思路记录下来,大多数源于网上找到的. 视频拖拽满足要求 1.播放器要支持 2.flv视频要有关键帧和met ...
- CKEditor 4 上传视频
参考资料:CKEditor添加Video视频插件 HTML5 video 记得配置插件以及上传地址,不知道哪一个是上传视频的地址参数,我也没有试,因为我有上传图片的功能,所以这三个参数我都设置了. / ...
- 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示
在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...
- 利用开源jPlayer播放.flv视频文件
最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...
- CKEditor在线编辑器增加一个自定义插件
CKEditor是一个非常优秀的在线编辑器,它的前身就是FCKEditor,CKEditor据官方说是重写了内核的,但功能和性能比FCKEditor更为强大和优越.记得07年的时候第一次接触FCKEd ...
- IIS中asp网站播放flv视频技术
播放flv视频文件需要使用flvplayer.swf程序(32K). HTML嵌入代码: <div id="FlashFile"> <object type=&q ...
- Flv视频格式如何转换成MP4格式
如何将flv视频格式转换成MP4格式呢?随着现在视频格式的不断多样化,视频格式转换的问题也成了现在生活中常见的问题,那么我们应该怎样将flv视频格式转换成MP4格式呢?下面我们就一起来看一下吧. 操作 ...
随机推荐
- std::map的clear()没有用?
昨天晚上,我徒弟跑过来讲,他的程序的内存占用居高不下,愿意是std::map的clear()没有效果.于是我让他用erase(begin,end); 试试也不行. 代码如下: void release ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- 解决IntelliJ Idea中文乱码问题
乱码的根源是字符编码与解码不一致 解决之道:统一编码
- 北大,awk 命令基础练习
北大,awk 命令基础练习 Red Hat Enterprise Linux Version 5.3 Get the latest news about the world's Open Source ...
- jQuery的dom操作(二)转
addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...
- WordPress 性能检测与速度优化
来源:SayBlog.Me [摘要]在如何提升WordPress性能与速度方面多花一些时间是值得的,本文下面为大家就如何提升WordPress运行效率列出了几点建议以供参考. 你的WordPress博 ...
- Exchanger示例
Exchanger有两个用户,当一(A)方调用exchange方法之后,就开始等待,直到另一(B)方开始调用exchange方法.两个exchange可以认为是原子性的. public class C ...
- git客户端
https://git-for-windows.github.io/ http://blog.csdn.net/shulianghan/article/details/18812279 自己的gith ...
- Redis:安装
此篇文章并不介绍linux下安装方法.围绕windows安装而介绍 两种安装方式: 1)下载压缩包,解压后(运行起来有个窗口,关闭掉就不在运行),没有windows服务被注册:可以只用命令在cmd将其 ...
- .NET业务实体类验证组件Fluent Validation
认识Fluent Vaidation. 看到NopCommerce项目中用到这个组建是如此的简单,将数据验证从业务实体类中分离出来,真是一个天才的想法,后来才知道这个东西是一个开源的轻量级验证组建. ...