出于兴趣爱好,前段时间自己尝试写了一个叫simple的cms,里面使用了百度ueditor编辑器,发现它的多图片上传模块很不错,用起来很方便,又可以选择已经上传好的图片。正好我又是个懒人,发现有现成的自己就不想新开发了。于是我就想,是不是可以调用这个上传模板为自己所用呢?
有了这个想法后,我就到网上查阅资料,可惜资料少的可怜,都不能很好解决我的问题。于是觉得还是自己动手丰衣足食,皇天不负苦心人,终于摸索出解决方法,现在分享出来,和自己有同样想法的小伙伴。
代码如下:
<html> <head> <script src="ueditor/ueditor1.43.config.js"></script> <script src="ueditor/ueditor1.43.all.min.js"></script> </head> <body> <script type="text/plain" id="j_ueditorupload" style="height:5px;display:none;" ></script> <script> //实例化编辑器 var o_ueditorupload = UE.getEditor('j_ueditorupload', { autoHeightEnabled:false }); o_ueditorupload.ready(function () { o_ueditorupload.hide();//隐藏编辑器 //监听图片上传 o_ueditorupload.addListener('beforeInsertImage', function (t,arg) { alert('这是图片地址:'+arg[0].src); }); /* 文件上传监听 * 需要在ueditor.all.min.js文件中找到 * d.execCommand("insertHtml",l) * 之后插入d.fireEvent('afterUpfile',b) */ o_ueditorupload.addListener('afterUpfile', function (t, arg) { alert('这是文件地址:'+arg[0].url); }); }); //弹出图片上传的对话框 function upImage() { var myImage = o_ueditorupload.getDialog("insertimage"); myImage.open(); } //弹出文件上传的对话框 function upFiles() { var myFiles = o_ueditorupload.getDialog("attachment"); myFiles.open(); } </script> <button type="button" onClick="upImage()">调用上传图片模块</button> <br> <button type="button" onClick="upFiles()">调用上传文件模块</button> </body> <html>
注意:需要在ueditor.all.min.js文件中找到d.execCommand("insertHtml",l)之后插入d.fireEvent('afterUpfile',b)