1. 首先，去kindeditor官网下载我们所需要的资源

    下载地址：资源下载路径

2. 然后解压资源包，把资源文件夹添加到自己的项目中去。

 

前台代码展示：

<script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>

<script>
    KindEditor.create('#editor_id', {
            width : '100%',
            height: '300px',
            //显示图片空间按钮
            allowFileManager:true,
            // 图片空间按钮的URL
            fileManagerJson:'${ctx}/article/browser',
            //文件上传的url
            uploadJson:'${ctx}/article/upload',
            //指定后台接收的图片的名称
            filePostName:'aa',
            //回调函数
            afterBlur:function () {
                this.sync();
            }
        });
</script>

//页面展示kindeditor页面的地方
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
</textarea>
//添加、修改的模态框
            function openModel(oper, id) {
            //根据id获得一行数据
            var article = $("#article-table").jqGrid("getRowData",id);

            $("#author").empty();
            //下拉框
            $.ajax({
                url:'${ctx}/guru/findAll',
                type:'post',
                data: {dharma:article.guruId},
                success:function (data) {
                    $("#author").append(data);
                }
            });
            //清空编辑器
            KindEditor.html("#editor_id","");
            //数据回显
            $("#article-id").val(article.id);
            $("#article-oper").val(oper);
            $("#article-title").val(article.title);
            //kindEditor的回显
            KindEditor.html("#editor_id",article.content);
            $("#modal").modal("show");
        }

 

后台代码展示（本地上传和图片空间的实现）：

//图片空间
    @RequestMapping("browser")
    public Map<String,Object> browser(HttpServletRequest request){
        //获取当前项目图片文件夹的路径
        File file = new File(request.getSession().getServletContext().getRealPath("view/article/image"));
        //文件夹中的所有文件
        File[] files = file.listFiles();

        String current_url = "http://"+request.getServerName()+":"+request.getServerPort()
                +request.getContextPath()+"/view/article/image/";
        System.out.println(current_url);
        List<Object> list = new ArrayList<>();
        for (int i = 0; i < files.length; i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("is_dir",false);
            map.put("has_file",false);
            map.put("filesize",files[i].length());
            map.put("is_photo",true);
            map.put("filetype", FilenameUtils.getExtension(files[i].getName()));
            map.put("filename",files[i].getName());
            map.put("datetime",new Date());
            list.add(map);
        }
        Map<String, Object> map = new HashMap<>();
        map.put("current_url",current_url);
        map.put("total_count",files.length);
        map.put("file_list",list);
        return map;
    }

    //本地上传
    @RequestMapping("upload")
    public Map<String,Object> upload(MultipartFile aa, HttpServletRequest request) throws IOException {
        System.out.println("aa:   "+aa.getOriginalFilename());
        //文件上传
        File realPath = new File(request.getSession().getServletContext().getRealPath("view/article/image"));
        File file = new File(realPath,aa.getOriginalFilename());
        aa.transferTo(file);
        Map<String, Object> map = new HashMap<>();
        String url = "http://"+request.getServerName()+":"+request.getServerPort()
                +request.getContextPath()+"/view/article/image/"+aa.getOriginalFilename();
        //返回 需要的返回值
        map.put("error",0);
        map.put("url",url);
        return map;
    }

实现的是这两个图片上传的按钮

KindEditor（富文本编辑器）的简单使用_System