请选择 进入手机版 | 继续访问电脑版

雨滴科技技术论坛

 找回密码
 立即注册
查看: 40|回复: 0

WangEditor富文本编辑器图片上传至服务器

[复制链接]

194

主题

1118

帖子

4467

积分

论坛元老

Rank: 8Rank: 8

积分
4467
扫一扫,手机访问本帖
发表于 2019-3-15 21:07:01 | 显示全部楼层 |阅读模式
  因为前端需要显示产品方案,软件内容以及新闻等等,所以需要在后端配置富文本编辑器,可以通过编辑内容并且保存相应的html格式到数据库。
查看了几款比较常用的富文本编辑器,有百度的UEditor,KindEditor以及WangEditor;比较之下选择了较为轻量级的WangEditor来作为后端的富文本编辑器。
  步骤如下:
  1.点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js放入项目中相应的文件夹;
  2.创建富文本编辑器
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>wangEditor demo</title>
  6. </head>
  7. <body>
  8.     <div id="editor">
  9.         <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
  10.     </div>

  11.     <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
  12.     <script type="text/javascript" src="/wangEditor.min.js"></script>
  13.     <script type="text/javascript">
  14.         var E = window.wangEditor
  15.         var editor = new E('#editor')
  16.         // 或者 var editor = new E( document.getElementById('editor') )
  17.         editor.create()
  18.     </script>
  19. </body>
  20. </html>
复制代码
TIM图片20190315204827.png
    这很容易就可以显示富文本编辑框了,但是遇到了一个问题,就是图片上传并保存的,有两种思路:其一是上传时直接将图片转为base64,而不用通过保存到服务器,然后显示时再由
base64转为图片,可以将整个编辑框的内容保存到数据库,这种方式看起来很方便。当时看了别人的做法,只能用于少量图片的情况下。稳妥做法,还是将图片上传到服务器,再返回
图片路径到编辑器。
    其中怎么上传到服务器这个过程花费了较多时间,步骤如下:
    1.根据文档设置图片上传的后台接口:
  1.     var E = window.wangEditor
  2.         var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象,class 选择器
  3.         //开启debug模式
  4.         editor.customConfig.debug = true;
  5.         // 关闭粘贴内容中的样式
  6.         editor.customConfig.pasteFilterStyle = false
  7.         // 忽略粘贴内容中的图片
  8.         editor.customConfig.pasteIgnoreImg = true
  9.         // 使用 base64 保存图片
  10.         //editor.customConfig.uploadImgShowBase64 = true

  11.         // 上传图片到服务器
  12.         editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
  13.         editor.customConfig.uploadImgServer = '/upload'; //设置上传文件的服务器路径
  14.         editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
  15.         //自定义上传图片事件
  16.         editor.customConfig.uploadImgHooks = {
  17.                 before : function(xhr, editor, files) {
  18.                        
  19.                 },
  20.                 success : function(xhr, editor, result) {
  21.                         console.log("上传成功");
  22.                 },
  23.                 fail : function(xhr, editor, result) {
  24.                         console.log("上传失败,原因是"+result);
  25.                 },
  26.                 error : function(xhr, editor) {
  27.                         console.log("上传出错");
  28.                 },
  29.                 timeout : function(xhr, editor) {
  30.                         console.log("上传超时");
  31.                 }
  32.         }

  33.         editor.create()
复制代码
   这里不能直接将文档的editor.customConfig.uploadImgServer = '/upload'; 设置路径照搬,而是根据自己的文件路径来写,不然会出错。
    2.创建WangEditor实体类:
  1. public class WangEditor {
  2.     private Integer errno; //错误代码,0 表示没有错误。
  3.     private String[] data; //已上传的图片路径

  4.     public WangEditor(String[] data) {
  5.         super();
  6.         this.errno = 0;
  7.         this.data = data;
  8.     }
  9.     public Integer getErrno() {
  10.         return errno;
  11.     }

  12.     public void setErrno(Integer errno) {
  13.         this.errno = errno;
  14.     }

  15.     public String[] getData() {
  16.         return data;
  17.     }

  18.     public void setData(String[] data) {
  19.         this.data = data;
  20.     }

  21.     @Override
  22.     public String toString() {
  23.         return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)
  24.                 + "]";
  25.     }
  26. }
复制代码
   3.在Controller添加相应的接口
  1.   @RequestMapping("/upload")
  2.     @ResponseBody
  3.     public WangEditor uploadFile(@RequestParam("myFile") MultipartFile multipartFile, HttpServletRequest request) {
  4.         String basePath = raindiConfig.getStaticPath() + "/" + raindiConfig.getProductImg() + "/editor/";
  5.         try {
  6.             // 获取项目路径
  7.             String realPath = request.getSession().getServletContext()
  8.                     .getRealPath("");
  9. //            InputStream inputStream = multipartFile.getInputStream();
  10. //            String contextPath = request.getContextPath();
  11.             // 服务器根目录的路径
  12. //            String path = realPath.replace(contextPath.substring(1), "");
  13.             // 根目录下新建文件夹upload,存放上传图片
  14. //            String uploadPath = path + "upload";
  15.             // 获取文件名称
  16.             log.debug("realPath....."+realPath);
  17.             String zh_file_suffix = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf("."), multipartFile.getOriginalFilename().length());
  18.             String zh_file_name = System.currentTimeMillis()+ zh_file_suffix;
  19.             FileLocalHelp.saveFile(basePath,zh_file_name, multipartFile.getBytes());

  20.             // 返回图片访问路径
  21.             String url = request.getScheme() + "://" + request.getServerName()
  22.                     + ":" + request.getServerPort() +"/"+ raindiConfig.getProductImg()+"/editor/"+zh_file_name;

  23.             String [] str = {url};
  24.             WangEditor we = new WangEditor(str);
  25.             return we;
  26.         } catch (Exception e) {
  27.             log.warn("上传文件失败", e);
  28.         }
  29.         return null;

  30.     }
复制代码
   4.结果如下:
TIM截图20190315210604.png


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

在线客服
在线咨询
咨询热线
0755-26787502-8006/8016
扫一扫二维码
直接访问本站

QQ|Archiver|手机版|小黑屋|雨滴科技  

GMT+8, 2019-3-25 18:04 , Processed in 0.075355 second(s), 14 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表