SSM+KindEditor实现富文本编辑器图片上传

水深无声 2023-10-18 19:08 81阅读 0赞

## 场景 ##

KindEitor官方文档：

[http://kindeditor.net/demo.php][http_kindeditor.net_demo.php]

## 实现 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 下载Kindeditor ###

下载地址：

[htt][][p://kindeditor.net/down.php][htt]

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

点击最新版本或小面自己选择版本就可下载

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

下载之后解压

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

其中前面是各种语言的示例demo,主要部分是下面的lang、plugins、themes、kindeditor-all.js、kindeditor-all-min.js、license.txt

### 添加到项目 ###

这里使用的是4.1.10版本

将解压后的核心文件夹复制到项目下webapp下的某目录下

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

### 修改jsp页面 ###

打开jsp页面

首先引入kindeditor.js

然后在页面需要添加富文本编辑器的地方添加textarea元素

<textarea name="content" id="content" class="j-content" rows="4"
    							cols="58" data-toggle="kindeditor" data-minheight="500"
    							style="width: 100%">
               					${message.content}
               				</textarea>

然后在页面上再添加脚本

具体参数说明参照官方文档：

[http://kindeditor.net/docs/option.html][http_kindeditor.net_docs_option.html]

### 编写后台接口 ###

来到uploadJson 所对应的后台接口

@Description("图片保存")
     @ResponseBody
     @RequestMapping(value = "/doSaveImage")
     public void doSaveImage(HttpServletRequest request, HttpServletResponse response, MultipartFile imgFile,
       String dir) {
      
       String scheme = request.getScheme();//http
       String serverName = request.getServerName();//localhost
       int serverPort = request.getServerPort();//8080
       String contextPath = request.getContextPath();//项目名
       String url = scheme+"://"+serverName+":"+serverPort+contextPath+"/upload/messageImg";
      
     
      Map<String, Object> jsonResult = null;
      String msg = "";
      try {
       response.setCharacterEncoding("UTF-8");
       PrintWriter out = null;
       try {
        out = response.getWriter();
       } catch (IOException e1) {
        e1.printStackTrace();
       }
       String callback = request.getParameter("CKEditorFuncNum");
    
       // 获得response,request
       Map<String, Object> m = new HashMap<String, Object>();
    
       if (!ServletFileUpload.isMultipartContent(request)) {
        m.put("error", 1);
        m.put("message", "请选择文件!");
        out.print(getError("请选择文件。"));
        out.close();
        return;
       }
    
       String originalFileName = null;// 上传的图片文件名
       String fileExtensionName = null;// 上传图片的文件扩展名
       if (imgFile.getSize() > 2 * 1024 * 1024) {
         out.print(getError("上传文件大小超过限制。")); 
                     out.close(); 
                     return; 
       } else {
        originalFileName = imgFile.getOriginalFilename();
        System.out.println("上传的图片文件名=" + originalFileName);
        fileExtensionName = originalFileName
          .substring(originalFileName.lastIndexOf("."), originalFileName.length()).toLowerCase();
        System.out.println("图片文件扩展名=" + fileExtensionName);
    
        if (imgFile.getSize() != 0) {
         Map<String, Object> result = ImageUtil.getInstance().uploadImgByUuid(Constants.UPLOAD_IMG_MESSAGE,
           imgFile);
         if (result.get("statusCode") == "300") {
          //out.println("<script type=\"text/javascript\">");
          // out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'',"
          // + result.get("message") + ");");
          //returnKindEditorMsg(result.get("message").toString(), request, response);
          //out.println("</script>");
         }
         String s = (String) result.get("message");
         String s1 = s.replace('\\', '/');
         String imageUrl = url + "/"+s1;
         
           
                     JSONObject obj = new JSONObject();   
                     obj.put("error", 0);   
                     obj.put("url",imageUrl);   
                     out.print(obj.toJSONString()); 
                     out.close(); 
        }
       }
      } catch (Exception e) {
       msg = "接口调用异常";
       jsonResult = JsonResult.jsonValidateReturn(false, e.getMessage());
       LogService.getInstance(this).error("保存消息信息失败" + e.getMessage());
       /* return jsonResult; */
      }
    
     }

### 最终效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5][]![Image 1][]

点击上传图片按钮

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6][]

上传之后

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7][]

[http_kindeditor.net_demo.php]: http://kindeditor.net/demo.php
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190528140713900.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[htt]: http://kindeditor.net/down.php
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190528141117420.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190528141109598.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190528141127267.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190528141142258.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_kindeditor.net_docs_option.html]: http://kindeditor.net/docs/option.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190528141305870.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190528141314307.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20190528141322263.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70