1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="/scripts/jquery-1.8.3.min.js"></script> 6 <script src="/ueditor/ueditor.config.js" type="text/javascript"></script> 7 <script src="/ueditor/ueditor.all.min.js" type="text/javascript"></script> 8 <!-- 当然还要引入jquery --> 9 <script type="text/javascript"> 10 var editor; 11 var _editor; 12 $(function () { 13 //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件 14 _editor = UE.getEditor('upload_ue'); 15 _editor.ready(function () { 16 //设置编辑器不可用 17 _editor.setDisabled(); 18 //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏 19 _editor.hide(); 20 //侦听图片上传 21 _editor.addListener('beforeInsertImage', function (t, arg) { 22 //将地址赋值给相应的input,只去第一张图片的路径 23 $("#picture").attr("value", arg[0].src); 24 //图片预览 25 $("#preview").attr("src", arg[0].src); 26 }) 27 //侦听文件上传，取上传文件列表中第一个上传的文件的路径 28 _editor.addListener('afterUpfile', function (t, arg) { 29 $("#file").attr("value", _editor.options.filePath + arg[0].url); 30 }) 31 }); 32 }); 33 //弹出图片上传的对话框 34 function upImage() { 35 var myImage = _editor.getDialog("insertimage"); 36 myImage.open(); 37 } 38 //弹出文件上传的对话框 39 function upFiles() { 40 var myFiles = _editor.getDialog("attachment"); 41 myFiles.open(); 42 } 43 </script> 44 </head> 45 <body> 46 <script type="text/plain" id="myEditor"> 47 </script> 48 <script type="text/plain" id="upload_ue"> 49 </script> 50 调用的页面：<br /><br /> 51 <input type="text" id="picture" name="cover" /><a href="javascript:void(0);" onclick="upImage();">上传图片</a><br /><br /> 52 <input type="text" id="file" /><a href="javascript:void(0);" onclick="upFiles();">上传文件</a><br /><br /> 53 </body> 54 </html>