springboot+layui中富文本编辑框的使用（一）——使用layui中layedit的图片上传

        最近捣鼓部门内部核心组件，到了文章发布这一步，是需要富文本编辑框的，首先喜滋滋的拿到了框架中的一个demo页面，然后人家用的neditor，真的是打鸡血了啊。然后绕了半天没绕明白就用了layedit。在整明白layedit之后，然后就又弄了neditor，真的是，世上无难事，只怕傻逼一样的坚持。。最后被我解决了。好了，背景介绍完了，接下来我先给大家贴一下layeditor的干货，第二篇再详细说neditor。

一、前端

        前端是超级简单的，在此就不做讲解了。

1、html

<textarea class="layui-textarea" id="demo" name="content" style="display: none ;> </textarea>

2、js

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

二、后端

        考虑到微服务上传需要上传到静态服务器然后再去访问静态服务器的资源比较麻烦，所以此处后端并没有做上传的操作，只是做了下转码，然后又传回到前端，通过base64的形式进行展示。文本的存储将使用大字段进行存储。

    /**
     * 富文本编辑框图片上传
     * @param request
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping("/uploadPicture")
    @ResponseBody
    public String uploadFile(HttpServletRequest request,
                             @RequestPart(value = "file") MultipartFile file) throws IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
        String res = sdf.format(new Date());
        //原始名称
        String fileName = file.getfileName();
        String[] suffixArra=fileName.split("\\.");
        String preffix="data:image/jpg;base64,".replace("jpg", suffixArra[suffixArra.length - 1]);
        //新的文件名称
        String newFileName = res + fileName.substring(fileName.lastIndexOf("."));
        //转base64
        BASE64Encoder base64Encoder =new BASE64Encoder();
        String base64EncoderImg = preffix + base64Encoder.encode(file.getBytes());
        //返回结果
		String url =  newFileName;
        Map<String,Object> map = new HashMap<String,Object>();
        Map<String,Object> dataMap = new HashMap<String,Object>();
        map.put("code",0);//0表示成功，1失败
        map.put("msg","上传成功");//提示消息
        map.put("data",dataMap);
        dataMap.put("src",url);//图片url
        dataMap.put("title",newFileName);//图片名称，这个会显示在
        String result = new JSONObject(map).toString();
        return result;
    }

        ok，至此，富文本编辑就完全ok了。下一篇将介绍neditor的操作，是通过上传操作实现的。