ckeditor添加插入flv视频的插件

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

昨天写在网页中播放flv的博文的时候,想在博文中插入视频,但是发现无法实现。
因为用的编辑器是ckeditor,决定自己写个插件插入视频。
官方的教程在这里,写得很好,又简明又清楚。

写一个插件需要建立的文件夹和文件如图所示:
ckeditor添加插入flv视频的插件
主目录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
上一篇:Android 判断SD卡是否存在及容量查询


下一篇:Java使用JAX-WS来写webservice时 Unable to create JAXBContext