ckeditor image上传js 修改成plugin的方法
在上一个文章中，介绍了自己写的一个image上传的ckeditor的 js的 扩展，发现在editor.destory();后在生成editor的时候，自己写的image上传的就调用不了了，没有自己查明原因，觉得可能是 CKEditor.on('pluginsLoad',function(){})的加载的问题，于是修改成了插件的方式。
?
建立步骤如下:
?
1.首先在ckeditor的plugins文件夹下面建立一个myAddImage文件夹，注意最好文件夹得名字的大小写，如果你用是linux系统，那么如果把myAddImage 写成 myaddimage 那么ckeditor会获取不到，我在测试的时候就犯了这个错误。
2.在myAddImage文件夹下建立plugin.js文件。
? 文件内容：
CKEDITOR.plugins.add( 'myAddImage',{ init : function( editor ) { /* /* 获取CKEditorFuncNum */ var getFuncNum = function(url) { var reParam = new RegExp('(?:[\?&]|&)CKEditorFuncNum=([^&]+)', 'i') ; var match = url.match(reParam) ; return (match && match.length > 1) ? match[1] : '' ; }; /* /* iframe onload处理 * 这段可以放在外面，根据不同的返回值自行进行处理 */ var getAjaxResult = function (t){ var _id = this.getId(); var _doc = this.getFrameDocument(); //获取页面返回值 var data = _doc.getBody().getHtml(); //firebrowser的处理 CKEDITOR.tools.callFunction(t.listenerData, data); this.removeListener('load', getAjaxResult); } CKEDITOR.dialog.add( 'myAddImage', function( editor ) { return { title : '添加图片', minWidth : 400, minHeight : 200, contents : [ { id : 'addImage', label : '添加图片', title : '添加图片', filebrowser : 'uploadButton', elements : [ { id : 'txtUrl', type : 'text', label : '图片网址', required: true }, { id : 'photo', type : 'file', label : '上传图片', style: 'height:40px', size : 38 }, { type : 'fileButton', id : 'uploadButton', label : '上传', filebrowser : { action : 'QuickUpload', target : 'addImage:txtUrl', onSelect:function(fileUrl, errorMessage){ //在这里可以添加其他的操作 } }, onClick: function(){ var d = this.getDialog(); var _photo = d.getContentElement('addImage','photo'); _funcNum = getFuncNum(_photo.action); var _iframe = CKEDITOR.document.getById(_photo._.frameId); //可以查看ckeditor.event doc 了解此段代码 //http://docs.cksource.com/ckeditor_api/ _iframe.on('load', getAjaxResult, _iframe, _funcNum); }, 'for' : [ 'addImage', 'photo'] } ] } ], onOk : function(){ _src = this.getContentElement('addImage', 'txtUrl').getValue(); if (_src.match(/(^\s*(\d+)((px)|\%)?\s*$)|^$/i)) { alert('请输入网址或者上传文件'); return false; } this.imageElement = editor.document.createElement( 'img' ); this.imageElement.setAttribute( 'alt', '' ); this.imageElement.setAttribute( 'src', _src ); //图片插入editor编辑器 editor.insertElement( this.imageElement ); } }; }); editor.addCommand( 'myImageCmd', new CKEDITOR.dialogCommand( 'myAddImage' ) ); editor.ui.addButton( 'AddImage', { label : '图片', icon:'images/images.jpg', //toolbar上icon的地址,要自己上传图片到images下 command : 'myImageCmd' }); }, requires : [ 'dialog' ]});??
?可以看出和上个文章的myeditor.js 的代码与本文中CKEDITOR.dialog.add中没有什么区别。
?关于为什么要用额外的
getAjaxResult
是因为有很多时候，我们的返回值不一定就直接是图片web地址，可能是json数据，要进行处理。
我没有发现firebrowser的
onSelect:function(fileUrl, errorMessage){ //在这里可以添加其他的操作 }会有对目标（
target : 'addImage:txtUrl',
）
的值的更新能够处理的，不论你在onselect中对fileUrl如何赋值，都不会影响txtUrl中的值。
?
3.就是外部如何调用这个plugin了
?
var editor = CKEDITOR.replace( id, { extraPlugins : 'myAddImage', //就是这里 toolbar : ['Source','-','Bold','Italic','Underline','Strike','-','Link','-','Unlink','-','AddImage'], filebrowserUploadUrl : '/upload.php' });?你也可以在config.js里面添加
extraPlugins : 'myAddImage'
这句话
?
1 楼 hongliang19840806 2010-06-11 filebrowserUploadUrl : '/upload.php' 这里的upload.php是否需要返回值呢？还是只需要处理上传的文件即可？ 2 楼 tdwm 2010-06-17 hongliang19840806 写道filebrowserUploadUrl : '/upload.php' 这里的upload.php是否需要返回值呢？还是只需要处理上传的文件即可？需要返回值，返回值的样式可以自己设定，在getAjaxResult 函数中进行处理返回值，返回值要包含图片上传后的路径，这样你处理后，才可以把路径插入到编辑器中 3 楼 wyongzhi 2010-08-10 楼主，_iframe.on('load', getAjaxResult, _iframe, _funcNum);这句话导致getAjaxResult 这个一直都在执行，上传成功的同时，出现了溢出错误 4 楼 tdwm 2010-08-12 wyongzhi 写道楼主，_iframe.on('load', getAjaxResult, _iframe, _funcNum);这句话导致getAjaxResult 这个一直都在执行，上传成功的同时，出现了溢出错误
1.是否有返回值？
2.返回值在成功的时候可以把_iframe的onload事件去掉
看看通过以上两点能处理不？ 5 楼 fulong258 2010-09-30 楼主：我按照附件的配置好，打开页面，出现一个简单的textarea框，点击create按钮后，全部消失！但直接打开压缩包里面的index.html文件则可以正常显示，谁能帮我想想是哪方面的问题，我的是JSP 6 楼 pengscheng 2010-09-30 tdwm 写道wyongzhi 写道楼主，_iframe.on('load', getAjaxResult, _iframe, _funcNum);这句话导致getAjaxResult 这个一直都在执行，上传成功的同时，出现了溢出错误
1.是否有返回值？
2.返回值在成功的时候可以把_iframe的onload事件去掉
看看通过以上两点能处理不？
请问楼主怎样去掉_iframe的onload时间呢？谢谢