700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 使用ueditor实现单独的图片上传功能

使用ueditor实现单独的图片上传功能

时间:2023-09-09 04:24:01

相关推荐

使用ueditor实现单独的图片上传功能

从网上找到的一种方法,代码如下:

/** 配置:* 1. 修改ueditor.config.js 中的路径* 2. 添加ueditor.jar 和commons-fileupload-1.2.2.jar 到lib更好* 3. 如果为strut2集成,则需要添加过滤器继承原有的过滤器,对imageUp.jsp进行过滤* 4. 如果单独使用工具类,则建议使用script的方式,不要使用input* 如下:* <input id="upload" type="text" value=""/><script id="myeditor"></script><span id="image">ddd</span>单独使用时,不用渲染,获取editor即可。否则在ie会出问题。5. 如果只需要渲染,则直接调用render方法即可。* UEditor单独图片上传工具类*///(function($){// 单张图片var image = {editor:null,init:function(editorid,keyid){var _editor =this.getEditor(editorid);_editor.ready(function () {_editor.setDisabled();_editor.hide();<span style="font-size:18px;color:#000099;"><strong> _editor.addListener('beforeInsertImage', function (t, args) {if(typeof keyid == 'string')$("#"+keyid).attr("src", args[0].src);else{var _img = $(keyid).parent().find('img');$(_img).attr("src", args[0].src);$(keyid).parent().find('textarea').val(args[0].title);}});</strong></span>});},getEditor:function(editorid){this.editor = UE.getEditor(editorid);return this.editor;},show:function(id){var _editor = this.editor;//注意这里只需要获取编辑器,无需渲染,如果强行渲染,在IE下可能会不兼容(切记)//和网上一些朋友的代码不同之处就在这里<span style="font-size:24px;color:#ff0000;"><strong>var image = _editor.getDialog("insertimage");</strong></span>$("#"+id).click(function(){image.render();image.open();});},render:function(editorid){var _editor = this.getEditor(editorid);_editor.render();}};// 多张图片var imageArray = {editor:null,init:function(editorid,keyid){var _editor =this.getEditor(editorid);_editor.ready(function () {_editor.setDisabled();_editor.hide();_editor.addListener('beforeInsertImage', function (t, args) {$('#mainContent_img_div').find('div').remove();for(i = 0; i < args.length; i++)$('#mainContent_img_div').append("<div><img id='changeImg_img"+i+"' src='"+args[i].src+"' width='100px' height='100px' /><textarea rows='3' cols='30' >"+args[i].title+"</textarea><script id='changeImg_ed"+i+"'></script><input type='button' id='changeImg"+i+"' value='更换此图片' /></div>");// 添加图片后,增加修改功能var divs = $('#mainContent_img_div').find('div');//console.info(divs);for(i = 0; i < divs.length; i++){var imgId = $(divs[i]).children('img').attr('id');var scriptId = $(divs[i]).children('script').attr('id');var btnId = $(divs[i]).children('input').attr('id');/*console.info("imgId:"+imgId);console.info("scriptId:"+scriptId);console.info("btnId:"+btnId);*/image.init(scriptId, $(divs[i]).children('input'));image.show(btnId);}});});},getEditor:function(editorid){this.editor = UE.getEditor(editorid);return this.editor;},show:function(id){var _editor = this.editor;//注意这里只需要获取编辑器,无需渲染,如果强行渲染,在IE下可能会不兼容(切记)//和网上一些朋友的代码不同之处就在这里$("#"+id).click(function(){var image = _editor.getDialog("insertimage");image.render();image.open();});},render:function(editorid){var _editor = this.getEditor(editorid);_editor.render();}};//})(jQuery);

但是运行之后发现

var image = _editor.getDialog("insertimage");

的image对象获取的是undefined,导致页面会报错,导致打不开图片上传页面,也就是说 _editor.getDialog("insertimage")里的insertimage找不到,纠结了好一会之后发现ueditor.config.js里有个toolbars对象配置里没有这个对象,加上之后可以打开图片上传页面了,如下:

页面打开如下图:

但是当选择一张图片后点击确定发现并没有执行

_editor.addListener('beforeInsertImage',...

,原因是没有给图片加上beforeInsertImage事件,找到image.js文件的下面两行代码,在两行代码前加上

editor.execCommand('insertimage', list);remote && editor.fireEvent("catchRemoteImage");

在两行代码前加上 editor.fireEvent('beforeInsertImage', list);

齐活!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。