coding++：快速构建 kindeditor 富文本编辑器（一）

此案例 demo 为 SpringBoot 开发

1、官网下载相关资源包：http://kindeditor.net/down.php

2、编写页面（引入相关JS）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kindeditor富文本编辑器</title>
    <link href="/kindeditor-4-1-10/themes/default/default.css" type="text/css" rel="stylesheet">

    <script type="text/javascript" charset="utf-8" src="/jquery-3.2.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/kindeditor-all-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/lang/zh_CN.js"></script>
    <script type="text/javascript" charset="utf-8" src="/kindeditor-Own/kindeditor.js"></script>

</head>
<body>
　　<textarea id="itemAddForm" style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
</body>
</html>

3、编写 JS（/kindeditor-Own/kindeditor.js） 创建实例

var itemAddEditor;
//页面初始化完毕后执行此方法
$(function () {
    var TT = TTO = {
        // 编辑器参数
        kingEditorParams: {
            //指定上传文件参数名称
            filePostName: "uploadFile",
            //指定上传文件请求的url。
            uploadJson: '/pic/upload',
            //上传类型，分别为image、flash、media、file
            dir: "image"
        },
        createEditor: function (select) {
            return KindEditor.create(select, TT.kingEditorParams);
        }
    };
    //创建富文本编辑器
    itemAddEditor = TTO.createEditor("#itemAddForm");
});

4、编写后台 配置虚拟路径（MyWebAppConfiguration）

package com.editors.kindeditor.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class MyWebAppConfiguration extends WebMvcConfigurerAdapter {

    /**
     * 添加一些虚拟路径的映射
     * 静态资源路径和上传文件的路径
     *
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /**
         * @Description: 对文件的路径进行配置, 创建一个虚拟路径/Path/** ，即只要在< img src="/Path/picName.jpg" />便可以直接引用图片
         *这是图片的物理路径  "file:/+本地图片的地址"
         */
        registry.addResourceHandler("/Path/**").addResourceLocations("file:/C:/Users/lenovo/AppData/Local/Temp/tomcat-docbase.2975979620477460781.8080/upload/");
        super.addResourceHandlers(registry);
    }

}

5、图片上传服务

package com.editors.kindeditor.controller;

import com.editors.utils.JsonUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.HashMap;
import java.util.Map;

@Controller
public class KindeditorController {

    @RequestMapping("/kindeditor")
    public String kindeditor() {
        return "kindeditor/kindeditor";
    }

    /**
     * 返回 复杂类型 容易产生浏览器兼容性问题
     * 原因：
     * 跟 @ResponseBody 默认行为有关
     * String类型可直接打回页面，而复杂类型无法直接打回，需要先转换为json
     */
    @RequestMapping("/pic/upload")
    @ResponseBody
    public String picUpload(MultipartFile uploadFile, HttpServletRequest request) {
        Map map = new HashMap<>();
        if (!uploadFile.isEmpty()) {
            String saveFileName = uploadFile.getOriginalFilename();
            File saveFile = new File(request.getSession().getServletContext().getRealPath("/upload/") + saveFileName);
            if (!saveFile.getParentFile().exists()) {
                saveFile.getParentFile().mkdirs();
            }
            String path = "/Path/" + saveFileName;
            System.out.println("path={" + path + "}");
            try {
                BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(saveFile));
                out.write(uploadFile.getBytes());
                out.flush();
                out.close();
                map.put("error", 0);
                map.put("url", path);
            } catch (Exception e) {
                e.printStackTrace();
                map.put("error", 1);
                map.put("url", path);
                return "上传失败," + e.getMessage();
            }
        } else {
            map.put("error", 1);
            map.put("url", "上传失败，因为文件为空.");
        }
        return JsonUtils.objectToJson(map);
    }

}

6、执行效果：