温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

在springmvc中使用Ueditor

发布时间:2020-08-01 15:20:05 来源:网络 阅读:2206 作者:huamulanyiyi 栏目:开发技术


Ueditor下载地址:

http://ueditor.baidu.com/website/download.html



在springmvc中使用Ueditor



  下载后直接解压缩。我主要实现文件上传和form表单提交数据。


一、配置文件修改 


uedit.config.js

  var URL = window.UEDITOR_HOME_URL; //主要是本地ueditor文件目录

  serverUrl: URL + "jsp/config.jhtml"  // 服务器统一请求接口路径


conf.json


 "p_w_picpathUrlPrefix": "http://localhost:8080/fetchbaike/ueditor/jsp/upload/", /* 图片访问路径前缀 */



二 、页面修改


 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>     <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script>     <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script>     <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->  <script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script> tyle type="text/css">         div{             width:100%;         }     </style> </head> <body> <form id="form"  method="post" action="./textarea.jhtml">         <input type="text" name="goodsname" value="goodsname"  />         <script type="text/plain" id="myEditor" name="myEditor">           <p>欢迎使用UEditor!</p>      </script>         <input type="submit" value="提交"/> </form> <!-- editor的初始化 --> <script type="text/javascript">     //实例化编辑器     //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例         var editor_a = UE.getEditor('myEditor',{      initialFrameWidth : 400,        initialFrameHeight: 300});             <!--用于上传文件跳转到controller-->     UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;          UE.Editor.prototype.getActionUrl = function(action) {            if (action == 'uploadp_w_picpath' || action == 'uploadscrawl' || action == 'uploadp_w_picpath'                 || action == 'uploadvideo' || action == 'uploadfile') {             return './ueditor/uploadp_w_picpath.jhtml';         }else {             return this._bkGetActionUrl.call(this, action);         }     }      </script> </body>



三、后台操作


@Controller @RequestMapping(value="/ueditor") public class UeditorController { @RequestMapping(value="/jsp/config") public void config(HttpServletRequest request,HttpServletResponse response,String action) throws Exception {         request.setCharacterEncoding("utf-8");     response.setHeader("Content-Type", "text/html");     String rootPath=request.getSession().getServletContext().getRealPath("/");     //会加载conf.json文件,注意路径问题     response.getWriter().write(new ActionEnter(request,rootPath).exec()); } @RequestMapping(value="/uploadp_w_picpath") @ResponseBody public Map<String,Object> uploadp_w_picpath(@RequestParam("upfile") MultipartFile[] multipartFiles,  HttpServletRequest request,HttpServletResponse response) throws Exception {     Map<String,Object> map=new HashMap<String,Object>();     String path=request.getSession().getServletContext().getRealPath("/ueditor/jsp/upload/");     System.out.println("path++"+path);     if(multipartFiles!=null && multipartFiles.length>0){         //循环遍历         for (MultipartFile multipartFile : multipartFiles) {                      //原来图片的名称             String OriginalFilename=multipartFile.getOriginalFilename();                          //获得图片新名称             String newFileName=getFileNewName(OriginalFilename.substring(OriginalFilename.lastIndexOf(".")));                         //创建文件             File targetFile=new File(path,newFileName);             if(!targetFile.exists()){                 targetFile.mkdirs();             }             String state="SUCCESS";             try {                 multipartFile.transferTo(targetFile);                 map.put("original", OriginalFilename);                 map.put("name",newFileName);                 //注意url会和conf.json中的路径配合找到图片                 map.put("url", newFileName);                 map.put("state", "SUCCESS");             } catch (Exception e) {             state="FAIL";             }         }     }     return map; }











向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI