CKEditor与CKFinder学习--浅谈CKFinder源码修改自定义上传文件名
2017-05-12 13:06
761 查看
FLV视频格式具有本身占有率低、视频质量良好、体积小等特点,非常适合在网络上传播。国内的视频站几乎都是采用FLV格式作为解决方案。但是,在新版本的CKEditor里却没有FLV格式视频的支持。不过CKEditor却提供了丰富的接口,于是我们自己动手开发CKEditor的FLV视频播放插件。
首先,配置好CKEditor和CKFinder。
在CKEditor目录下有专门放插件的目录plugins,我们也把插件放这个目录下,新建一个文件夹flvPlayer,然后在这个目录下新建一个文件plugin.js,输入下面内容:
目录如下:
目录结构
代码很容易理解,添加名为flvPlayer的插件,并初始化。这里有两个参数需要注意:
label:当鼠标悬停在按钮上出现的文字提示,相当于HTML里的title
command:点击按钮的时候默认执行的事件
然后,我们在ckeditor/config.js里注册这个插件,就能看到了。打开ckeditor/config.js,添加下面代码:
请注意: config.extraPlugins = ‘flvPlayer’; 放在其它 config.extraPlugins的前面
但是现在我们还没为点击按钮添加相应的事件。再打开plugin.js,添加下面代码:
为插件添加对话框。我们把相应的代码放在plugins/flvPlayer/dialogs/flvPlayer.js里。编辑flvPlayer.js:
参数如下:
title : /标题上显示的文字/,
minWidth : /宽度/,
minHeight : /高度/,
buttons: /添加更多的按钮/,
onOk: /完成后执行的函数/ ,
contents: /对话框里的UI元素/
添加以后对话框看起来是这样:
更复杂的元素布局比如这样:
下面的onOk函数无非就是收集前面填写的东西,然后将这段代码插入CKEditor,很好理解。
完成后的效果:
转自:http://www.tangyong.net/感谢原作者。
首先,配置好CKEditor和CKFinder。
在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,添加下面代码:
请注意: config.extraPlugins = ‘flvPlayer’; 放在其它 config.extraPlugins的前面
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'; };
但是现在我们还没为点击按钮添加相应的事件。再打开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>' }] }]
下面的onOk函数无非就是收集前面填写的东西,然后将这段代码插入CKEditor,很好理解。
完成后的效果:
转自:http://www.tangyong.net/感谢原作者。
相关文章推荐
- CKEditor与CKFinder学习--CKFinder源码修改自定义上传文件名
- ckeditor+ckfinder中上传文件名的自定义
- CKEditor与CKFinder学习--自定义界面及按钮事件捕获
- CKEditor与CKFinder学习--CKFinder源代码改动自己定义上传文件名称
- asp.net基础复习(四)——修改fckeditor2.6.3 .Net源码来自定义上传文件名
- 整合ckeditor3.6+ckfinder2.1及修改文件上传路径和重命名
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
- CKEditor与CKFinder学习--自定义界面及按钮事件捕获
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
- FCKEditor ConnectorSerlvet源码 自定义上传文件修改
- asp fckeditor自定义上传文件的文件名
- ckeditor和ckfinder在asp.net中的配置(分页,自定义按钮)
- .net环境下ckeditor与ckfinder学习笔记
- paperclip自定义上传文件名
- .net环境下ckeditor与ckfinder学习笔记
- JavaScript CSS修改学习第五章 给“上传”添加样式
- .Net 图片上传的一个类库的源码_有修改
- [CakePHP] 如何在cakephp下使用ckeditor和ckfinder上传文件
- FCKEditor 自定义用户目录的修改步骤 (附源码)
- 自定义fckeditor上传的文件名