kindeditor在项目中的使用

1.在官网下载kindeditor，将文件拖入webapp文件夹中
2.在jsp页面引入js

<%--引入kindeditor的js文件--%>
<script src="kindeditor/kindeditor-all-min.js"></script>
<script src="kindeditor/lang/zh-CN.js"></script>

3.在需要使用kindeditor的地方插入标签

<%--kindeditor--%>
   <div class="form-group">
                        <textarea id="kindeditor" name="content" style="width:700px;height:300px;">
                        </textarea>
  </div>

4.设置kindeditor的相关属性

//设置kindeditor相关属性
        KindEditor.create('#kindeditor', {
            width: '100%',
            height: '350px',
            resizeType: 0,
            //显示图片空间按钮
            allowFileManager: true,
            // 图片空间按钮的URL
            fileManagerJson: '${pageContext.request.contextPath}/article/browser',
            //文件上传的url
            uploadJson: '${pageContext.request.contextPath}/article/upload',
            //指定后台接受的图片的名称
            filePostName: 'filename',
            //设置一下
            afterBlur: function () {
                this.sync();
            }
        });

5.在controller中编写图片上传与图片空间展示的方法

@RequestMapping("upload")
    public Map<String, Object> upload(MultipartFile filename,HttpServletRequest request) {
        Map<String, Object> map = new HashMap<>();
        try {
            //文件上传
            filename.transferTo(new File(request.getSession().getServletContext().getRealPath("/img"),filename.getOriginalFilename()));
            //给返回值
            String url = "http://"+request.getServerName() +":"+request.getServerPort()+request.getContextPath()+"/img/"+filename.getOriginalFilename();
            System.out.println("url:"+url);
            map.put("error",0);
            map.put("url",url);
            return map;
        } catch (IOException e) {
            e.printStackTrace();
            map.put("error",1);
            return map;
        }
    }

    @RequestMapping("browser")
    public Map<String, Object> browser(HttpServletRequest request) {
        //获取当前文件夹中的文件
        File file = new File(request.getSession().getServletContext().getRealPath("img"));
        File[] files = file.listFiles();
        //http://localhost:8989/cmfz/img/
        String current_url = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/img/";
        //将map集合中的数据添加在list中
        ArrayList<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集合中
        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;
    }
}

6.自定义添加修改的方法，使用kindeditor编辑
（1）自定义修改按钮，将edit和修改的id传入后台

{
      name: 'oper', width: 80, formatter: function (value, option, rows) {
        return "<button  onclick=\"openModal('edit','" + rows.id + "')\">修改</button>";
   }
},

（2）当点击按钮时，打开模态框

//打开模态框
        function openModal(oper, id) {
            //重新赋值为空
            KindEditor.html("#kindeditor", "");
            //获取jqrid表格中的值
            var article = $("#table").jqGrid("getRowData", id);
            $("#article-oper").val(oper);
            $("#article-id").val(article.id);
            $("#article-title").val(article.title);
            //给编辑器回显content内容
            KindEditor.html("#kindeditor", article.content);
            //展示模态框
            $("#article-modal").modal("show");
        }

（3）调用oper操作方法

//添加或修改
        function saveArticle() {
            $.ajax({
                url: '${pageContext.request.contextPath}/article/oper',
                type: 'post',
                //表单序列化获取数值
                data: $("#article-form").serialize(),
                //datatype: 'json',
                success: function () {
                    //关闭模态框
                    $("#article-modal").modal("hide");
                    //刷新jqgrid
                    $("#table").trigger("reloadGrid")
                }
            })
        }

（4）模态框

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">展示所有文章</a></li>
    <%--将oper方法中的参数add传到后台--%>
    <li role="presentation"><a onclick="openModal('add')">添加文章</a></li>
</ul>
<div class="modal fade" role="dialog" id="article-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">我的文章</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" id="article-form">
                    <%--传值给oper方法--%>
                    <input type="hidden" id="article-oper" name="oper">
                    <%--将id的值传给后台--%>
                    <input type="hidden" id="article-id" name="id">

                    <div class="form-group">
                        <label for="article-title">文章标题:</label>
                        <input type="text" name="title" class="form-control" id="article-title" placeholder="请输入标题">
                    </div>
                    <%--下拉列表显示所有上师--%>
                    <div class="form-group">
                        <select id="guru" name="guruId">

                        </select>
                    </div>
                    <%--kindeditor--%>
                    <div class="form-group">
                        <textarea id="kindeditor" name="content" style="width:700px;height:300px;">

                        </textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveArticle()">保存</button>
                <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<table id="table" class="table table-striped table-bordered table-hover">

</table>
<%--分页工具栏--%>
<div id="pager"></div>

6.需要注意的地方
（1）在修改时id获取不到
解决办法：在使用jqGrid表格时，没有id字段，表单序列化获取数据时，没有获取到
（2）修改时会自动提交上一次kindeditor中的内容
解决办法：
（3）