曾经用UEditor的单独的图片上传功能。
当然网上也有很多,但是不得不说,基本上都只是针对火狐和chrome的,在ie在基本都是运行不了的
曾经我也试图去兼容IE但是,找了很多方法,最终都是不得不面对IE的bug.
于是我认为这个UEditor是不能兼容ie的。只到一年以后,一次偶然的机会再次用到ue.
这一次认真去去看来ue的源码,原来网上的一些朋友提供的代码是有问题,于是改之,发现一起如此简单。
个人对代码进行了一些封装,希望能作为一个工具类,下次方便调用:
/* * 配置: * 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(); _editor.addListener('beforeInsertImage', function (t, args) { $("#"+keyid).val(args[0].src); }); }); }, 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(); } }; $(function(){ image.init("myeditor","upload"); image.show("image"); }); })(jQuery);而html只需要如此:
<input id="upload" type="text" value=""/> <script id="myeditor"></script> <span id="image">ddd</span>
作者:yangzhihello 发表于2013-11-27 0:47:45 原文链接
阅读:106 评论:0 查看评论