您的位置: 首页  >  文章  >  Java maven项目集成ueditor（百度本编辑器）插件详解

Java maven项目集成ueditor（百度本编辑器）插件详解

分类: 文章 • 2024-10-20 15:12:10

相信很多项目都要用到类似的功能，ueditor是一个非常强大的插件，当然也有直接集成好的直接引用就行了。在这里讲一下百度编辑器的集成过程，本人是走了好多弯路，在这里希望各位开发的朋友少走些弯路，节约开发时间。

1，首先需要下载ueditor包  我下载的是  ueditor1_4_3_3-utf8-jsp ，然后引入项目里面  把相关的js和css  配置到配置文件中

2，第一步实现了 ，那么就要在jsp页面显示出来。很简单   

[html] view plain copy
  1. <div id="editor" style="width:794px;height:340px;"></div>  
  2. <script type="text/javascript">  
  3.     var ue = UE.getEditor('editor');  
  4. </script>  

3，难点在于图片的上传，以及各种配置

找到jsp文件夹里面config.json ，打开需要改两项 imageActionName  ，   imagePathFormat

[java] view plain copy
  1. /* 上传图片配置项 */  
  2.     "imageActionName": "uploadImage", /* 执行上传图片的action名称 */  
  3.     "imageFieldName": "upfile", /* 提交的图片表单名称 */  
  4.     "imageMaxSize": 2048000, /* 上传大小限制，单位B */  
  5.     "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */  
  6.     "imageCompressEnable": true, /* 是否压缩图片,默认是true */  
  7.     "imageCompressBorder": 1600, /* 图片压缩最长边限制 */  
  8.     "imageInsertAlign": "none", /* 插入的图片浮动方式 */  
  9.     "imageUrlPrefix": "", /* 图片访问路径前缀 */  
  10.     "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */  
  11.                                 /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */  
  12.                                 /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */  
  13.                                 /* {time} 会替换成时间戳 */  
  14.                                 /* {yyyy} 会替换成四位年份 */  
  15.                                 /* {yy} 会替换成两位年份 */  
  16.                                 /* {mm} 会替换成两位月份 */  
  17.                                 /* {dd} 会替换成两位日期 */  
  18.                                 /* {hh} 会替换成两位小时 */  
  19.                                 /* {ii} 会替换成两位分钟 */  
  20.                                 /* {ss} 会替换成两位秒 */  
  21.                                 /* 非法字符 \ : * ? " < > | */  
  22.                                 /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */  
imageActionName -》执行上传图片的action名称

imagePathFormat-》上传保存路径,可以自定义保存路径和文件名格式

4，修改 ueditor.config.js  自定义编辑器的功能

[html] view plain copy
  1. /**  
  2.    * 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。  
  3.    * 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。  
  4.    * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。  
  5.    * 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。  
  6.    * 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。  
  7.    * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";  
  8.    */  
  9.   var URL = window.UEDITOR_HOME_URL || getUEBasePath();  
  10.   /**  
  11.    * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。  
  12.    */  
  13.   window.UEDITOR_CONFIG = {  
  14.   
  15.       //为编辑器实例添加一个路径，这个不能被注释  
  16.       UEDITOR_HOME_URL: URL  
  17.       // 服务器统一请求接口路径  
  18.       , serverUrl: URL + "jsp/controller.jsp"  
  19.       //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义  
  20.       , toolbars: [[  
  21.           'bold', 'italic', 'underline', 'fontborder', 'strikethrough', '|', 'forecolor', 'backcolor', '|',  
  22.           'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',  
  23.           'fontfamily', 'fontsize', '|',  
  24.           'indent', '|',  
  25.           'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',  
  26.           '|', 'inserttable',  
  27.           '|','simpleupload','imagenone', 'imageleft', 'imageright', 'imagecenter'  
  28.       ]]  
修改 toolbars

5，Java代码  上传图片 ，ueditor需要特定的返回值，title，original，size，state，type，url

controller里面定义名称和config.json里面imageActionName定义的一样，@RequestMapping("uploadImage")

[java] view plain copy
  1. @ResponseBody  
  2.     @RequestMapping("uploadImage")  
  3.     public Map<String,String> uploadImage(@RequestParam("upfile")  CommonsMultipartFile upfile,HttpServletRequest request,Model model) throws Exception{   
  4.           
  5.         //得到路径 C:/tomcat/webapps/testDemo/  
  6.         String rootPath = request.getSession().getServletContext().getRealPath("/");  
  7.         rootPath = rootPath.replaceAll("\\\\", "/");  
  8.           
  9.         String path = rootPath + "/ueditor/jsp/upload/image";  
  10.           
  11.         File f = new File(path);  
  12.         if (!f.exists()) {  
  13.             f.mkdirs();  
  14.         }  
  15.       
  16.         FileItem item = upfile.getFileItem();  
  17.         //文件路径  
  18.         String pathFileName = item.getName();  
  19.         //字节数  
  20.         long l = item.getSize();  
  21.         String fileSize = Long.toString(l);  
  22.         //文件名  
  23.         int start = pathFileName.lastIndexOf("\\");  
  24.         String fileName = pathFileName.substring(start + 1);  
  25.         //后缀 .jpg  
  26.         int indexName = fileName.lastIndexOf('.');  
  27.         String subName = fileName.substring(indexName);  
  28.         //新文件名  
  29.         String nowName = new SimpleDateFormat("yyMMddHHmmss").format(new Date()) +"_"+ fileName;  
  30.               
  31.         item.write(new File(path, nowName));  
  32.           
  33.         String strBackUrl = "http://" + request.getServerName() //服务器地址  
  34.         + ":"  
  35.         + request.getServerPort()           //端口号    
  36.         + request.getContextPath();      //项目名称  
  37.           
  38.         Map<String,String> map = new HashMap<String,String >();  
  39.         //文件原名称   
  40.         map.put("title", nowName);  
  41.         //现在文件名称  
  42.         map.put("original", fileName);  
  43.         //文件大小（字节数）  
  44.         map.put("size", fileSize);  
  45.         //是否上传成功  
  46.         map.put("state", "SUCCESS");  
  47.         //文件类型 .+后缀名  
  48.         map.put("type", subName);  
  49.         //文件路径  
  50.         map.put("url",  strBackUrl+"/ueditor/jsp/upload/image/"+nowName);  
  51.           
  52.         return map;  
  53.           
  54.     }  

然后jsp里面需要调 uploadImage

[javascript] view plain copy
  1. UE.Editor.prototype._bkGetActionUrl ? "" : UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;  
  2.     UE.Editor.prototype.getActionUrl = function(action) {  
  3.         //这里很重要，很重要，很重要，要和配置中的imageActionName值一样  
  4.         if (action == 'uploadImage'){  
  5.             //这里调用后端我们写的图片上传接口  
  6.             return '${ctx}/sys/upload/uploadImage';  
  7.         }else{  
  8.             return this._bkGetActionUrl.call(this, action);  
  9.         <span style="white-space:pre">  </span>}  
  10.     }  

这样图片就在编辑器里面显示出来了

Java maven项目集成ueditor（百度本编辑器）插件详解

6，保存到数据库里是带有标签的text ，在这之前要把里面图片的路径替换成服务器的路径

[java] view plain copy
  1. private final static Pattern ATTR_PATTERN = Pattern.compile("<img[^<>]*?\\ssrc=['\"]?(.*?)['\"]?\\s.*?>",Pattern.CASE_INSENSITIVE);  
[java] view plain copy
  1. if (StringUtils.isEmpty(information.getId())) {  
  2.             information.setId(IdGenerator.uuid());  
[java] view plain copy
  1. <span style="white-space:pre">          </span>//得到ueditor内的内容  
  2.             String content = request.getParameter("editorValue");  
  3.               
  4.             Matcher matcher = ATTR_PATTERN.matcher(content);  
  5.             List<String> piclist = new ArrayList<String>();  
  6.             while (matcher.find()) {  
  7.                 piclist.add(matcher.group(1));  
  8.             }  
  9.               
  10.             if(piclist.size() == 0){  
  11.                 information.setInfoText(content);  
  12.                 informationService.addInformation(information,user);  
  13.             }else{  
  14.                 String newPicPath = "";  
  15.                 String str = "";  
  16.                 for (String string : piclist) {  
  17.                     //得到路径名/ueditor/jsp/upload/image/....  
  18.                     str = string.substring(string.indexOf("/ueditor"));  
  19.                     //得到存图片/ueditor/jsp/upload/image/....的项目路径  
  20.                     String rootPath = request.getSession().getServletContext().getRealPath("/");  
  21.                     rootPath = rootPath.replaceAll("\\\\", "/");  
  22.                     //本地图片的路径  
  23.                     String picturePath = rootPath+str;  
  24.                     String folder = UserFileController.getStaticFolder(request, response);  
  25.                     folder = folder.replaceAll("\\\\", "/");  
  26.                       
  27.                     if(!(new File(folder+str).exists())){  
  28.                         new File(folder+str).mkdirs();  
  29.                     }  
  30.                       
  31.                     InputStream in = new FileInputStream(picturePath);  
  32.                     BufferedImage bi = ImageIO.read(in);  
  33.                     File file = new File(folder+str);  
  34.                     ImageIO.write(bi, "JPEG", file);   
  35.                     in.close();  
  36.                 }  
  37.                   
  38.                 String strBackUrl = "http://" + request.getServerName() //服务器地址  
  39.                 + ":"  
  40.                 + request.getServerPort()           //端口号    
  41.                 + request.getContextPath();      //项目名称  
  42.                   
  43.                 String folder = UserFileController.getImgFilesFolder(request, response);  
  44.                 newPicPath = content.replace(strBackUrl,folder);  
  45.                 information.setInfoText(newPicPath);  
  46.                 informationService.addInformation(information,user);  
  47.             }  
  48.         }  

相关推荐