springmvc结合xheditor实现图文编辑

有时候做新闻和公告需要实现图片和文本可视化编辑，这里讲解的是xheditor编辑器（ps：csdn的编辑器用的就是xheditor）。

首先说明一下：有些朋友可能觉得xheditor可以做到粘贴图片上传，其实这种上传是把图片解析成64的编码，但是图片过多会造成字段数据过大，这样读取的速度会很慢，所以最好做到图片上传到自己服务器，大概环境，我用的mysql所以存储编辑器内容用的是text字段，实体类中用String对应。

首先自己下载xheditor，然后引入下面三个文件：

 <script type="text/javascript" src="${baseURL}/js/3rd-plug/xheditor/xheditor-1.2.2.min.js"></script>
     <script type="text/javascript" src="${baseURL}/js/3rd-plug/xheditor/xheditor_lang/zh-cn.js"></script>
  <link rel="stylesheet" href="${baseURL}/js/3rd-plug/xheditor/common.css" type="text/css" media="screen" />

然后jsp中编辑器写法：

<textarea id="showShopinfo" name="showShopinfo"  rows="12" cols="80"  upImgUrl="${contextPath }/management/signManager/upImg" upImgExt="jpg,jpeg,gif,png">
</textarea>

注意：upImgUrl制定的url是后台处理图片上传到自己服务器的的方法，自己定义自己的url。

后台方法：controller

 @RequestMapping(value = "/upploadImg", method = RequestMethod.POST)
    public @ResponseBody
    String upploadImg(HttpServletRequest request, HttpServletResponse response) throws Exception, BaseException {
    String url = unShopsService.upploadImg(request);
                   return "{\"err\":\"\",\"msg\":\""+url+"\"}";
    }

注意这个controller方法的返回，这个格式是固定的，url为你上传到服务器之后的url，这样返回之后前端编辑器就会显示你上传的图片。

service方法：service

@Override
public String upploadImg(HttpServletRequest request) throws Exception,
BaseException {

  int i = request.getContentLength();
          byte buffer[] = new byte[i];
          int j = 0;
          while (j < i) { //获取表单的上传文件
              int k = request.getInputStream().read(buffer, j, i - j);
              j += k;
          }
          if (buffer.length >= 0) { //文件是否为空
         String timeTamp = new Date().getTime() + "";
         File file = new File("temp.e");  
           OutputStream output = new FileOutputStream(file);  
           BufferedOutputStream bufferedOutput = new BufferedOutputStream(output);  
           bufferedOutput.write(buffer);  

}

}

从service可以看到这里得到前端传过来的文件有点特殊，所以就贴出来了。

最后整体保存全部内容，就类似一个实体类的普通String保存就好了，重要的部分都贴出来了，有什么问题可以追问。