KindEditor的简单应用

我们要使用kindeditor时，先去kindeditor官网下载我们所需要的资源

网址:资源下载路径

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

废话不多说，直接上代码

 <script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('textarea[name="content"]', {
            	//本地上传的方法路径
                uploadJson: '/article/upload',
                //上传文件名
                filePostName: 'aa',
                //本地空间的按钮
                allowFileManager:true,
                //本地空间图片的获取路径
                fileManagerJson:'/article/cloud'
                //回调函数
                 afterBlur: function () {
          			  this.sync();
      			  }
            })
        })
    </script>


//页面展示kindeditor页面的地方
 <textarea id="editor_id" name="content" style="width:700px;height:300px;">
  </textarea>

下面是后台java的代码（从电脑本地上传和查看服务器本地图片）

//从电脑本地上传图片
@RequestMapping("upload")
    public Map<String, Object> upload(MultipartFile aa, HttpServletRequest request) {
        HashMap<String, Object> map = new HashMap<>();
        try {
            String realPath = request.getSession().getServletContext().getRealPath("/view/article/image/");
            //拼接url路径  格式：  http://服务器名：端口号/项目名/资源文件存储路径/文件名
            String url = "http://" + request.getServerName() + ":"
                    + request.getServerPort()
                    + request.getContextPath() + "/view/article/image/" + aa.getOriginalFilename();
           	//文件上传
            aa.transferTo(new File(realPath, aa.getOriginalFilename()));
            map.put("error", 0);
            map.put("url", url);
            return map;
        } catch (IOException e) {
            e.printStackTrace();
            map.put("error", 1);
            map.put("url", null);
            return map;
        }
    }
	//	读取本地服务器资源路径中的图片
    @RequestMapping("cloud")
    public Map<String, Object> cloud(HttpServletRequest request) {
        //获取文件夹的绝对路径
        String realPath = request.getSession().getServletContext().getRealPath("/view/article/image/");
        File file = new File(realPath);
        //获取当前文件夹的文件
        File[] files = file.listFiles();
        List<FileMes> list = new ArrayList<>();
        for (File f : files) {
        	//fileMes是我自己封装的一个对象 用于存储照片的信息  也可以使用一个map存储信息
            FileMes fileMes = new FileMes();
            fileMes.setFilesize(f.length());
            fileMes.setIs_dir(f.isDirectory());
            fileMes.setIs_photo(true);
            fileMes.setDir_path(realPath);
            fileMes.setFiletype(FilenameUtils.getExtension(f.getName()));
            fileMes.setFilename(f.getName());
            fileMes.setHas_file(f.isFile());
            fileMes.setDatetime(new Date());
            list.add(fileMes);
        }
        String url = "http://"+request.getServerName()+":"
                +request.getServerPort()+request.getContextPath()+"/view/article/image/";
        Map<String, Object> map = new HashMap<>();
        map.put("current_url",url);
        map.put("total_count",files.length);
        map.put("file_list",list);
        return map;
    }