为CKEditor开发FLV视频播放插件

最新推荐文章于 2021-05-31 14:28:11 发布

ishowing

最新推荐文章于 2021-05-31 14:28:11 发布

阅读量6k

点赞数 2

分类专栏： asp.net 文章标签： flv html function upload button templates

本文链接：https://blog.csdn.net/ishowing/article/details/5358824

版权

asp.net 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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:　'width:50px' },{ type:　'text', 　　　　　　　　　　　　　　label:　'视频高度', 　　　　　　　　　　　　　　id:　'myheight', 　　　　　　　　　　　　　　'default':　'320px', 　　　　　　　　　　　　　　style:　'width:50px' },{ type:　'select', 　　　　　　　　　　　　　　label:　'自动播放', 　　　　　　　　　　　　　　id:　'myloop', 　　　　　　　　　　　　　　required:　true, 　　　　　　　　　　　　　　'default':　'false', 　　　　　　　　　　　　　　items:　[['是',　'true'],　['否',　'false']] }]//children finish },{ 　　　　　　　　　　 type:　'textarea', 　　　　　　　　　　　　　　style:　'width: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>' }] }]

得到的对话框是这样：