首发:个人博客,更新&纠错&回复

昨天写在网页中播放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的视频,视频上传没做,可以仿照图片上传的功能来实现。

长期欢迎项目合作机会介绍,项目收入10%用于酬谢介绍人。新浪微博:@冷镜,QQ:908789432

ckeditor添加插入flv视频的插件的更多相关文章

  1. ckeditor添加代码插入功能及高亮显示(插件)

    Auto SyntaxHighlighter SyntaxHighlighter CKEditor Button 下载以上两个插件,启用 以下可有可无: (设置在编辑器的显示样式) ckeditor高 ...

  2. Unity3d:使用uWebKit插件嵌入网页,网页中的flv视频无法播放

    问题描述:unity3d程序,使用uWebKit插件嵌入网页,用来播放FLV视频,有的电脑可以正常播放,有的电脑在网页中播放不了ps:网页中的播放器用的是player.swf解决方案:是由于网页中的播 ...

  3. windows下flv视频网站进度条随意拖放[转]

    网站中视频都转换成flv格式,奈何flv格式无法拖拽,此问题纠结了好久,最终得以解决.现将解决思路记录下来,大多数源于网上找到的. 视频拖拽满足要求 1.播放器要支持 2.flv视频要有关键帧和met ...

  4. CKEditor 4 上传视频

    参考资料:CKEditor添加Video视频插件 HTML5 video 记得配置插件以及上传地址,不知道哪一个是上传视频的地址参数,我也没有试,因为我有上传图片的功能,所以这三个参数我都设置了. / ...

  5. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  6. 利用开源jPlayer播放.flv视频文件

    最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...

  7. CKEditor在线编辑器增加一个自定义插件

    CKEditor是一个非常优秀的在线编辑器,它的前身就是FCKEditor,CKEditor据官方说是重写了内核的,但功能和性能比FCKEditor更为强大和优越.记得07年的时候第一次接触FCKEd ...

  8. IIS中asp网站播放flv视频技术

    播放flv视频文件需要使用flvplayer.swf程序(32K). HTML嵌入代码: <div id="FlashFile"> <object type=&q ...

  9. Flv视频格式如何转换成MP4格式

    如何将flv视频格式转换成MP4格式呢?随着现在视频格式的不断多样化,视频格式转换的问题也成了现在生活中常见的问题,那么我们应该怎样将flv视频格式转换成MP4格式呢?下面我们就一起来看一下吧. 操作 ...

随机推荐

  1. std::map的clear()没有用?

    昨天晚上,我徒弟跑过来讲,他的程序的内存占用居高不下,愿意是std::map的clear()没有效果.于是我让他用erase(begin,end); 试试也不行. 代码如下: void release ...

  2. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  3. 解决IntelliJ Idea中文乱码问题

    乱码的根源是字符编码与解码不一致 解决之道:统一编码

  4. 北大,awk 命令基础练习

    北大,awk 命令基础练习 Red Hat Enterprise Linux Version 5.3 Get the latest news about the world's Open Source ...

  5. jQuery的dom操作(二)转

    addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...

  6. WordPress 性能检测与速度优化

    来源:SayBlog.Me [摘要]在如何提升WordPress性能与速度方面多花一些时间是值得的,本文下面为大家就如何提升WordPress运行效率列出了几点建议以供参考. 你的WordPress博 ...

  7. Exchanger示例

    Exchanger有两个用户,当一(A)方调用exchange方法之后,就开始等待,直到另一(B)方开始调用exchange方法.两个exchange可以认为是原子性的. public class C ...

  8. git客户端

    https://git-for-windows.github.io/ http://blog.csdn.net/shulianghan/article/details/18812279 自己的gith ...

  9. Redis:安装

    此篇文章并不介绍linux下安装方法.围绕windows安装而介绍 两种安装方式: 1)下载压缩包,解压后(运行起来有个窗口,关闭掉就不在运行),没有windows服务被注册:可以只用命令在cmd将其 ...

  10. .NET业务实体类验证组件Fluent Validation

    认识Fluent Vaidation. 看到NopCommerce项目中用到这个组建是如此的简单,将数据验证从业务实体类中分离出来,真是一个天才的想法,后来才知道这个东西是一个开源的轻量级验证组建. ...