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的视频，视频上传没做，可以仿照图片上传的功能来实现。