layui使用富文本编辑器

HTML代码：
这里的原理是你输入的内容会经过处理插入到文本区域textarea中

js代码：

/**
  * 文本编辑器
 */
layui.use(['form', 'layedit'], function(){
  var layedit = layui.layedit;
//上传图片,必须放在 创建一个编辑器前面
  layedit.set({
      uploadImage: {
           url: 'upload' //接口url
          ,type: 'post' //默认post
      }
  });
  //建立编辑器
  layedit.build('demo',{
	  height: 500  //设置编辑器高度
  }); 
});

后台接口代码：

/** 上传图片方法
     * @param request
     * @param description
     * @param file
     * @return
     * @throws Exception
     */
    @RequestMapping(value="upload")
    @ResponseBody
	public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException {
    	SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
        String res = sdf.format(new Date());
        //服务器上使用
       // String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
        //本地使用
        String rootPath ="E:\\bolg";
        //原始名称
        String originalFilename = file.getOriginalFilename();
        //新的文件名称
        String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
        //新文件
        File newFile = new File(rootPath+ File.separator+newFileName);
        //判断目标文件所在的目录是否存在
        if(!newFile.getParentFile().exists()) {
            //如果目标文件所在的目录不存在，则创建父目录
            newFile.getParentFile().mkdirs();
        }
        System.out.println(newFile);
        //将内存中的数据写入磁盘
        file.transferTo(newFile);
        //完整的url
        String fileUrl =  newFileName;
        Map map = new HashMap();
        Map map2 = new HashMap();
        map.put("code",0);//0表示成功，1失败
        map.put("msg","上传成功");//提示消息
        map.put("data",map2);
        map2.put("src",fileUrl);//图片url
        map2.put("title",newFileName);//图片名称，这个会显示在输入框里
        String result = new JSONObject(map).toString();
        return result;
    }

注意：如果想在编辑器中显示你上传的图片，需要配置tomcat的虚拟路径

配置虚拟路径的方法参考这篇文章：https://blog.csdn.net/qq_36750461/article/details/85050946