UEditor独立图片、文件上传模块
引用文件: <script src="~/Content/ueditor/ueditor.config.js"></script> <script src="~/Content/ueditor/ueditor.all.min.js"></script> <script src="~/Content/ueditor/lang/zh-cn/zh-cn.js"></script> <script src="~/Content/ueditor/ueditor.all.js"></script> 修改配置(找到ueditor/net下的config.json文件): "imageUrlPrefix": "http://localhost:5531", /* 图片访问路径前缀 【修改成自己项目的路径】 前台代码 1.【加载整个编辑器】: @Html.TextAreaFor(model => model.jobDescription) <script type="text/javascript"> var editorOption = { initialFrameWidth: 1000, initialFrameHeight: 200 }; var editor = new baidu.editor.ui.Editor(editorOption); editor.render('jobDescription'); $('form').submit(function () { $('#jobDescription').val(editor.getContent()); }); </script> 2.【上传文件独立模块】: <table class="table table-bordered table-hover definewidth m10"> <tr> <td width="10%" class="tableleft"> <span>附件上传</span> </td> <td> <script type="text/plain" id="j_ueditorupload" style="height:5px;display:none;"> </script> <script type="text/javascript"> //实例化编辑器 var o_ueditorupload = UE.getEditor('j_ueditorupload', { autoHeightEnabled: false }); o_ueditorupload.ready(function () { o_ueditorupload.hide();//隐藏编辑器 //监听图片上传,地址:arg[0].src o_ueditorupload.addListener('beforeInsertImage', function (t, arg) { //alert('这是图片地址:' + arg[0].src); //这里解析你的返回类型 }); /* 文件上传监听 * 1、在ueditor.all.min.js文件中找到 * d.execCommand("insertHtml",l); * 之后插入d.fireEvent('afterUpfile',b); * 2、打开ueditor.all.js,在filelist = utils.isArray(filelist) ? filelist : [filelist];后面加上以下代码: * if(me.fireEvent('afterUpfile', filelist) === true){ * return; * } */ //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="submit" onclick="upImage()">上传图片</button> <button type="submit" onclick="upFiles()">上传文件</button> </td> </tr> </table>
作 者:大師兄丶
出 处:http://www.cnblogs.com/zhao-yi
Git 地 址:https://github.com/ZhaoYis
个人博客:http://www.zhaoyis.com.cn
关于作者:主要从事基于.Net Framework平台的项目开发。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是作者坚持原创和持续写作的最大动力!
出 处:http://www.cnblogs.com/zhao-yi
Git 地 址:https://github.com/ZhaoYis
个人博客:http://www.zhaoyis.com.cn
关于作者:主要从事基于.Net Framework平台的项目开发。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是作者坚持原创和持续写作的最大动力!