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

雨滴科技技术论坛

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

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

[复制链接]

204

主题

1158

帖子

4622

积分

论坛元老

Rank: 8Rank: 8

积分
4622
扫一扫,手机访问本帖
发表于 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.    
  2.     wangEditor demo


  3.    

  4.         

    欢迎使用 wangEditor 富文本编辑器


  5.    


  •    
  •    
  •    
  •         var E = window.wangEditor
  •         var editor = new E('#editor')
  •         // 或者 var editor = new E( document.getElementById('editor') )
  •         editor.create()
  •    

  • 复制代码 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-5-23 03:16 , Processed in 0.068448 second(s), 13 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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