首页 » WEB开发 » 正文

为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]

  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]

  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.     config.toolbar_MyToolbar =
  8.     [
  9.         [‘Source’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’],
  10.         [‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-‘,’Print’, ‘SpellChecker’, ‘Scayt’],
  11.         [‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
  12.         [‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’],
  13.         ‘/’,
  14.         [‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’],
  15.         [‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’Blockquote’],
  16.         [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’],
  17.         [‘Link’,’Unlink’,’Anchor’],
  18.         [‘Image’,’Flash’,’flvPlayer’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’],
  19.         ‘/’,
  20.         [‘Styles’,’Format’,’Font’,’FontSize’],
  21.         [‘TextColor’,’BGColor’],
  22.         [‘Maximize’, ‘ShowBlocks’,’-‘,’About’]
  23.     ];
  24.     config.extraPlugins = ‘flvPlayer’;
  25. };

 

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


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

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

 

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

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

 

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

 

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

 

[javascript]
  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]
  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

本文链接地址: 为CKEditor开发FLV视频播放插件

转载请注明: 转载自技安后院

No tags for this post.

发表评论