ckeditor添加插入flv视频的插件

为什么80%的码农都做不了架构师？>>>   

首发：个人博客，更新&纠错&回复

昨天写在网页中播放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。

转载于:https://my.oschina.net/u/866216/blog/495343