FLV视频格式具有本身占有率低、视频质量良好、体积小等特点，非常适合在网络上传播。国内的视频站几乎都是采用FLV格式作为解决方案。但是，在新版本的CKEditor里却没有FLV格式视频的支持。不过CKEditor却提供了丰富的接口，于是我们自己动手开发CKEditor的FLV视频播放插件。
首先，配置好CKEditor和CKFinder，具体配置方法请参考我的上一篇文章：
http://blog.csdn.net/ishowing/archive/2009/09/24/4589950.aspx
在CKEditor目录下有专门放插件的目录plugins，我们也把插件放这个目录下，新建一个文件夹flvPlayer，然后在这个目录下新建一个文件plugin.js，输入下面内容：
- CKEDITOR.plugins.add('flvPlayer',
- {
- init: function(editor)
- {
- //plugin code goes here
- var pluginName = 'flvPlayer';
- editor.ui.addButton('flvPlayer',
- {
- label: '插入Flv视频',
- command: pluginName
- });
- }
- });
目录如下：
代码很容易理解，添加名为flvPlayer的插件，并初始化。这里有两个参数需要注意：
label：当鼠标悬停在按钮上出现的文字提示，相当于HTML里的title
command：点击按钮的时候默认执行的事件
然后，我们在ckeditor/config.js里注册这个插件，就能看到了。打开ckeditor/config.js，添加下面代码：
- CKEDITOR.editorConfig = function( config )
- {
- // Define changes to default configuration here. For example:
- // config.language = 'fr';
- // config.uiColor = '#AADC6E';
- config.toolbar = 'MyToolbar';
- config.toolbar_MyToolbar =
- [
- ['Source','-','Save','NewPage','Preview','-','Templates'],
- ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
- '/',
- ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
- ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','flvPlayer','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
- '/',
- ['Styles','Format','Font','FontSize'],
- ['TextColor','BGColor'],
- ['Maximize', 'ShowBlocks','-','About']
- ];
- config.extraPlugins = 'flvPlayer';
- };
运行以后我们就可以看到，多出来一个位置：
按钮上没有图片的话会让人郁闷的，于是我们给按钮添加一个图标。我们找到一个16×16的图标，也放到plugins/flvPlayer目录下。如果你使用kama风格的话，打开skins/kama/editor.css，加入以下代码：
- .cke_skin_kama .cke_button_flvPlayer .cke_icon{background:url(images/insertflv.gif);}
再次运行页面，我们就能看到按钮的图标了：
但是现在我们还没为点击按钮添加相应的事件。再打开plugin.js，添加下面代码：
- CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/flvPlayer.js');
- editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
- 为插件添加对话框。我们把相应的代码放在plugins/flvPlayer/dialogs/flvPlayer.js里。编辑flvPlayer.js：
- CKEDITOR.dialog.add('flvPlayer', function(editor){
- var escape = function(value){
- return value;
- };
- return {
- title: '插入Flv视频',
- resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
- minWidth: 350,
- minHeight: 300,
- contents: [{
- id: 'info',
- label: '常规',
- accessKey: 'P',
- elements:[
- {
- type: 'hbox',
- widths : [ '80%', '20%' ],
- children:[{
- id: 'src',
- type: 'text',
- label: '源文件'
- },{
- type: 'button',
- id: 'browse',
- filebrowser: 'info:src',
- hidden: true,
- align: 'center',
- label: '浏览服务器'
- }]
- },
- {
- type: 'hbox',
- widths : [ '35%', '35%', '30%' ],
- children:[{
- type: 'text',
- label: '视频宽度',
- id: 'mywidth',
- 'default': '470px',
- style: '50px'
- },{
- type: 'text',
- label: '视频高度',
- id: 'myheight',
- 'default': '320px',
- style: '50px'
- },{
- type: 'select',
- label: '自动播放',
- id: 'myloop',
- required: true,
- 'default': 'false',
- items: [['是', 'true'], ['否', 'false']]
- }]//children finish
- },{
- type: 'textarea',
- style: '300px;height:220px',
- label: '预览',
- id: 'code'
- }]
- }, {
- id: 'Upload',
- hidden: true,
- filebrowser: 'uploadButton',
- label: '上传',
- elements: [{
- type: 'file',
- id: 'upload',
- label: '上传',
- size: 38
- },
- {
- type: 'fileButton',
- id: 'uploadButton',
- label: '发送到服务器',
- filebrowser: 'info:src',
- 'for': ['Upload', 'upload']//'page_id', 'element_id'
- }]
- }],
- onOk: function(){
- mywidth = this.getValueOf('info', 'mywidth');
- myheight = this.getValueOf('info', 'myheight');
- myloop = this.getValueOf('info', 'myloop');
- mysrc = this.getValueOf('info', 'src');
- html = '' + escape(mysrc) + '';
- //editor.insertHtml("<pre class=/"brush:" + lang + ";/">" + html + "</pre>");
- editor.insertHtml("<embed height=" + myheight + " width=" + mywidth + " autostart=" + myloop + " flashvars=/"file=" + html + "/" allowfullscreen=/"true/" allowscriptaccess=/"always/" bgcolor=/"#ffffff/" src="/" mce_src="/""ckeditor/plugins/flvPlayer/jwplayer.swf/"></embed>");
- },
- onLoad: function(){
- }
- };
- });
参数如下：
title : /*标题上显示的文字*/,
minWidth : /*宽度*/,
minHeight : /*高度*/,
buttons: /*添加更多的按钮*/,
onOk: /*完成后执行的函数*/ ,
contents: /*对话框里的UI元素*/
- contents: [{
- id: 'page1', /* not CSS ID attribute! */
- label: 'Page1',
- accessKey: 'P',
- elements:[ /*elements */]
- }, {
- id:'page2',
- label:'Page2',
- accessKey: 'Q',
- elements:[/*elements*/]
- }]
添加以后对话框看起来是这样：
更复杂的元素布局比如这样：
- elements:[{
- type : 'hbox',
- widths : [ '100px', '100px', '100px' ],
- children :
- [{
- type:'html',
- html:'<div>Cell1</div>',
- },{
- type:'html',
- html:'<div>Cell2</div>',
- },{
- type: 'vbox',
- children:[{
- type:'html',
- html:'<div>Cell3</div>',
- },{
- type:'html',
- html:'<div>Cell4</div>'
- }]
- }]
得到的对话框是这样：
下面的onOk函数无非就是收集前面填写的东西，然后将这段代码插入CKEditor，很好理解。
完成后的效果：
写原创教程不容易，转载请注明转自：http://www.tangyong.net/谢谢！
需要用到的播放器在这里下载：http://download.csdn.net/source/2109293
再PS一个：文章参考了香港一哥们写的教程：《CKEditor Plugin Development》，链接：http://www.voofie.com/content/2/ckeditor-plugin-development/
一并致谢！
再再PS：cksource上关于对话框的接口：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.fileButton.html