富文本 wangEditor 前后端交互例子

之前看了很多 但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉

参考文献

官方文档 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

主要引入： 

官方文档中都有，没用的可以自行删除

    
    


    
    
    

     
    
    
    
    
    
    
    
    
    
    



     
 
     
     
     

     获取text
        
     

效果

 

后台：  

  /*
     * 新增公告信息
     */
    @RequestMapping(value = "/inserAnnouncements")
    @ResponseBody
    public Map inserAnnouncements(String announcement_mag) {
        Map map = new HashMap();
        Announcement announcement = new Announcement();
        announcement.setAnnouncement_mag(announcement_mag);
        try {
            int insertUser = userservice.inserAnnouncement(announcement);
        } catch (Exception e) {
            map.put("result", "false");
            e.printStackTrace();
        }
        map.put("result", "true");
        System.out.println(map.get("result"));
        return map;
    }

在富文本中输入文字：点击提交

数据库字段如下图：

添加成功

 

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

2019.4.1

继续完善插入图片回显到富文本

测试使用的是spring boot框架 

代码：

    
    


    
    
    

     
    
    
    
    
    
    
    
    
    
    



     
 
     
     
     

     获取text
        
     

主要相对于之前的代码新增了，服务器地址和自定义文件名，本插件会自动访问你的路径进行调用图片下载上传。

后台代码：

/*
     * 返回图片路径（富文本）
     */
    @RequestMapping(value = "/selectJpgUrl")
    @ResponseBody
    public Map selectJpgUrl(@RequestParam(value = "myFileName") MultipartFile mf, HttpServletRequest request)
            throws IOException {
        String realPath = request.getSession().getServletContext().getRealPath("myFileName");
        // 获取源文件
        String filename = mf.getOriginalFilename();
        String[] names = filename.split("\\.");//
        String tempNum = (int) (Math.random() * 100000) + "";
        String uploadFileName = tempNum + System.currentTimeMillis() + "." + names[names.length - 1];
        File targetFile = new File(realPath, uploadFileName);// 目标文件
        // 开始从源文件拷贝到目标文件
        // 传图片一步到位
        try {
            mf.transferTo(targetFile);
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        Map map = new HashMap();
        map.put("errno","0");
        System.out.println(uploadFileName);
        map.put("data","http://localhost:8080/static/myFileName/"+uploadFileName);// 这里应该是项目路径
        map.put("url","http://localhost:8080/static/myFileName/"+uploadFileName);
        return map;// 将图片地址返回
    }

//细节如下：

 

spring boot配置文件：

 

 

设置完成展示富文本：

控制台显示