- 浏览: 236534 次
- 性别:
- 来自: 武汉
-
文章分类
- 全部博客 (123)
- Struts1 (1)
- struts2 (3)
- 专业词汇解释 (1)
- oracle (1)
- javascript (19)
- ExtJS (14)
- jsp (5)
- webLogic (8)
- GXT (2)
- SSH (2)
- displayTag (3)
- 浏览器 (6)
- eclipse (6)
- tomcat (1)
- spring (3)
- J2SE (1)
- SVN (5)
- JBPM (1)
- jQuery (1)
- DWR (2)
- jfreechart (1)
- php (1)
- java组件 (1)
- JSTL (1)
- 操作系统(winXP) (3)
- 心得 (3)
- webservices (1)
- Hibernate (1)
- 工具 (2)
- Online Editor (2)
- 区别 (1)
- 职场技能 (1)
- 个人关注 (2)
- Android (7)
- Linux (7)
- HTML (1)
- 工作总结 (1)
- 笔记 (0)
最新评论
-
luoxiang183：
是啊，不对啊
jboss-as-7.1.1不兼容spring解决办法 -
liqiaoqiaoz：
按照你上面的改法不正确出现如下错误：13:49:55,759 ...
jboss-as-7.1.1不兼容spring解决办法 -
webczw：
不错，学习
Android通过http协议数据交互的两种方式 -
peng_hao1988：
...
Rational Rose -
gepangtsai：
再判断下：
if (grid) {
grid.setW ...
ExtJS GridPanel根据窗口大小自动变化插件
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，输入下面内容：
view plaincopy to clipboardprint?
CKEDITOR.plugins.add('flvPlayer',
{
init: function(editor)
{
//plugin code goes here
var pluginName = 'flvPlayer';
editor.ui.addButton('flvPlayer',
{
label: '插入Flv视频',
command: pluginName
});
}
});
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，添加下面代码：
view plaincopy to clipboardprint?
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';
};
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的图标，放到kama/images目录下。如果你使用kama风格的话，打开skins\kama\editor.css，加入以下代码：
view plaincopy to clipboardprint?
.cke_skin_kama .cke_button_flvPlayer .cke_icon{background:url(images/insertflv.gif);}
.cke_skin_kama .cke_button_flvPlayer .cke_icon{background:url(images/insertflv.gif);}
再次运行页面，我们就能看到按钮的图标了：
但是现在我们还没为点击按钮添加相应的事件。再打开plugin.js，添加下面代码：
view plaincopy to clipboardprint?
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(){
}
};
});
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元素*/
view plaincopy to clipboardprint?
contents: [{
id: 'page1', /* not CSS ID attribute! */
label: 'Page1',
accessKey: 'P',
elements:[ /*elements */]
}, {
id:'page2',
label:'Page2',
accessKey: 'Q',
elements:[/*elements*/]
}]
contents: [{
id: 'page1', /* not CSS ID attribute! */
label: 'Page1',
accessKey: 'P',
elements:[ /*elements */]
}, {
id:'page2',
label:'Page2',
accessKey: 'Q',
elements:[/*elements*/]
}]
添加以后对话框看起来是这样：
更复杂的元素布局比如这样：
view plaincopy to clipboardprint?
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>'
}]
}]
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谢谢！
再PS一个：文章参考了香港一哥们写的教程：《CKEditor Plugin Development》，链接：http://www.voofie.com/content/2/ckeditor-plugin-development/
一并致谢！
发表评论
相关推荐
FLV视频格式具有本身占有率低、视频质量良好、体积小等特点，非常适合在网络上传播。国内的视频站几乎都是采用FLV格式作为解决方案...于是我自己动手开发CKEditor的FLV视频播放插件现在上传。PS：这个版本是.net版的。
最近项目开发需要用到CKEditor在线编辑器，但发现他本身没有自带，所以需要自己手动配置插件。但网上很多配置都有问题，自己摸索了好久终于搞定。需要注意的细节有：flvPlayer文件夹的内容直接放在ckeditor文件夹...
这可能包括如何集成FLV插件，如何配置CKEditor以显示和播放FLV文件，以及如何处理相关的JavaScript或服务器端代码。 **标签解析：** "grails" - Grails是一个基于Groovy语言的开源Web应用框架，它构建在Spring Boot...
在数字媒体领域，FLVPlayer.swf是一款广泛使用的Flash视频播放器，它主要用于在线播放FLV格式的视频文件。FLV，全称Flash Video，是Adobe公司推出的一种流式视频格式，特别适合在网络上传输，因其高效的数据压缩和...
JW Player支持MP4、FLV等多种视频格式，不仅可以在桌面端流畅播放，而且在移动设备上也有很好的兼容性。它提供了自定义皮肤、广告集成、字幕支持、播放列表等功能，使得开发者可以轻松地在网站或应用中添加高质量的...
4. **CKEditor集成**：CKEditor是CK播放器常用的文本编辑器，需要理解其API，将播放器插件无缝嵌入到编辑器中，允许用户在编辑文章时插入媒体。 5. **前端技术**：HTML、CSS和JavaScript的运用，为播放器创建合适的...