为CKEditor开发FLV视频播放插件

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，输入下面内容：

[javascript]  view plain copy

1. CKEDITOR.plugins.add('flvPlayer',  
2. {  
3.     init: function(editor)      
4.     {          
5.         //plugin code goes here  
6.         var pluginName = 'flvPlayer';   
7.         editor.ui.addButton('flvPlayer',  
8.         {                 
9.             label: '插入Flv视频',  
10.             command: pluginName  
11.         });  
12.     }  
13. });  

目录如下：

代码很容易理解，添加名为flvPlayer的插件，并初始化。这里有两个参数需要注意：
label：当鼠标悬停在按钮上出现的文字提示，相当于HTML里的title
command：点击按钮的时候默认执行的事件
然后，我们在ckeditor/config.js里注册这个插件，就能看到了。打开ckeditor/config.js，添加下面代码：

[javascript]  view plain copy

1. CKEDITOR.editorConfig = function( config )  
2. {  
3.     // Define changes to default configuration here. For example:  
4.     // config.language = 'fr';  
5.     // config.uiColor = '#AADC6E';  
6.     config.toolbar = 'MyToolbar';  
7.   
8.     config.toolbar_MyToolbar =  
9.     [  
10.         ['Source','-','Save','NewPage','Preview','-','Templates'],  
11.         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],  
12.         ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],  
13.         ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],  
14.         '/',  
15.         ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],  
16.         ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],  
17.         ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],  
18.         ['Link','Unlink','Anchor'],  
19.         ['Image','Flash','flvPlayer','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],  
20.         '/',  
21.         ['Styles','Format','Font','FontSize'],  
22.         ['TextColor','BGColor'],  
23.         ['Maximize', 'ShowBlocks','-','About']  
24.           
25.     ];  
26.     config.extraPlugins = 'flvPlayer';  
27.   
28. };  

运行以后我们就可以看到，多出来一个位置：

按钮上没有图片的话会让人郁闷的，于是我们给按钮添加一个图标。我们找到一个16×16的图标，也放到plugins/flvPlayer目录下。如果你使用kama风格的话，打开skins/kama/editor.css，加入以下代码：

[css]  view plain copy

1. .cke_skin_kama .cke_button_flvPlayer .cke_icon{background:url(images/insertflv.gif);}  

再次运行页面，我们就能看到按钮的图标了：

但是现在我们还没为点击按钮添加相应的事件。再打开plugin.js，添加下面代码：

[javascript]  view plain copy

1. CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/flvPlayer.js');          
2. editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));  
3. 为插件添加对话框。我们把相应的代码放在plugins/flvPlayer/dialogs/flvPlayer.js里。编辑flvPlayer.js：  
4. CKEDITOR.dialog.add('flvPlayer',　function(editor){  
5. 　　　　  
6. 　　　　var　escape　=　function(value){  
7. 　　　　　　　　return　value;  
8. 　　　　};  
9. 　　　　return　{  
10. 　　　　　　　　title:　'插入Flv视频',  
11. 　　　　　　　　resizable:　CKEDITOR.DIALOG_RESIZE_BOTH,  
12. 　　　　　　　　minWidth: 350,  
13.                 minHeight: 300,  
14. 　　　　　　　　contents:　[{  
15. 　　　　　　　　　　id: 'info',    
16.                     label: '常规',  
17.                     accessKey: 'P',  
18.                     elements:[  
19.                         {  
20.                         type: 'hbox',  
21.                         widths : [ '80%', '20%' ],  
22.                         children:[{  
23.                                 id: 'src',  
24.                                 type: 'text',  
25.                                 label: '源文件'  
26.                             },{  
27.                                 type: 'button',  
28.                                 id: 'browse',  
29.                                 filebrowser: 'info:src',  
30.                                 hidden: true,  
31.                                 align: 'center',  
32.                                 label: '浏览服务器'  
33.                             }]  
34.                         },  
35.                         {  
36.                         type: 'hbox',  
37.                         widths : [ '35%', '35%', '30%' ],  
38.                         children:[{  
39.                             type:　'text',  
40. 　　　　　　　　　　　　　　label:　'视频宽度',  
41. 　　　　　　　　　　　　　　id:　'mywidth',  
42. 　　　　　　　　　　　　　　'default':　'470px',  
43. 　　　　　　　　　　　　　　style:　'width:50px'  
44.                         },{  
45.                             type:　'text',  
46. 　　　　　　　　　　　　　　label:　'视频高度',  
47. 　　　　　　　　　　　　　　id:　'myheight',  
48. 　　　　　　　　　　　　　　'default':　'320px',  
49. 　　　　　　　　　　　　　　style:　'width:50px'  
50.                         },{  
51.                             type:　'select',  
52. 　　　　　　　　　　　　　　label:　'自动播放',  
53. 　　　　　　　　　　　　　　id:　'myloop',  
54. 　　　　　　　　　　　　　　required:　true,  
55. 　　　　　　　　　　　　　　'default':　'false',  
56. 　　　　　　　　　　　　　　items:　[['是',　'true'],　['否',　'false']]  
57.                         }]//children finish  
58.                         },{  
59. 　　　　　　　　　　        type:　'textarea',  
60. 　　　　　　　　　　　　　　style:　'width:300px;height:220px',  
61. 　　　　　　　　　　　　　　label:　'预览',  
62. 　　　　　　　　　　　　　　id:　'code'  
63. 　　　　　　　　　　    }]  
64.                     }, {  
65.                         id: 'Upload',  
66.                         hidden: true,  
67.                         filebrowser: 'uploadButton',  
68.                         label: '上传',  
69.                         elements: [{  
70.                             type: 'file',  
71.                             id: 'upload',  
72.                             label: '上传',  
73.                             size: 38  
74.                         },  
75.                         {  
76.                             type: 'fileButton',  
77.                             id: 'uploadButton',  
78.                             label: '发送到服务器',  
79.                             filebrowser: 'info:src',  
80.                             'for': ['Upload', 'upload']//'page_id', 'element_id'   
81.                         }]  
82. 　　　　　　　　}],  
83. 　　　　　　　　onOk:　function(){  
84. 　　　　　　　　　　　　mywidth　=　this.getValueOf('info',　'mywidth');  
85. 　　　　　　　　　　　　myheight　=　this.getValueOf('info',　'myheight');  
86. 　　　　　　　　　　　　myloop　=　this.getValueOf('info',　'myloop');  
87. 　　　　　　　　　　　　mysrc　=　this.getValueOf('info',　'src');  
88. 　　　　　　　　　　　　html　=　''　+　escape(mysrc)　+　'';  
89. 　　　　　　　　　　　　//editor.insertHtml("<pre　class=/"brush:"　+　lang　+　";/">"　+　html　+　"</pre>");  
90. 　　　　　　　　　　　　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>");  
91. 　　　　　　　　},  
92. 　　　　　　　　onLoad:　function(){  
93. 　　　　　　　　}  
94. 　　　　};  
95. });  

参数如下：
title : /*标题上显示的文字*/,
minWidth : /*宽度*/,
minHeight : /*高度*/,
buttons: /*添加更多的按钮*/,
onOk: /*完成后执行的函数*/ ,
contents: /*对话框里的UI元素*/

[javascript]  view plain copy

1. contents: [{  
2.         id: 'page1',  /* not CSS ID attribute! */  
3.         label: 'Page1',  
4.         accessKey: 'P',  
5.         elements:[ /*elements */]  
6.     }, {  
7.         id:'page2',  
8.         label:'Page2',  
9.          accessKey: 'Q',  
10.         elements:[/*elements*/]  
11.     }]  

添加以后对话框看起来是这样：

更复杂的元素布局比如这样：

[javascript]  view plain copy

1. elements:[{  
2.                     type : 'hbox',  
3.                     widths : [ '100px', '100px', '100px' ],  
4.                     children :  
5.                     [{  
6.                         type:'html',  
7.                         html:'<div>Cell1</div>',  
8.                     },{  
9.                         type:'html',  
10.                         html:'<div>Cell2</div>',  
11.                     },{  
12.                         type: 'vbox',  
13.                         children:[{  
14.                             type:'html',  
15.                             html:'<div>Cell3</div>',  
16.                         },{  
17.                             type:'html',  
18.                             html:'<div>Cell4</div>'  
19.                         }]  
20.                     }]  

得到的对话框是这样：

下面的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