富文本编辑器kindeditor的使用(JAVA)

环境搭建

官方文档 ：编辑器使用方法

1. 下载并解压放入项目中
2. 在需要显示编辑器的位置添加textarea输入框

	<textarea id="editor_id" name="content" style="width:700px;height:300px;">

	</textarea>

3. 引入文件并初始化编辑器

	//引入js文件
	<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
	<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
	//集成KindEditor
	KindEditor.create('#editor_id',{
   
	    width:'100%',
	    height:'350px',
	    //显示图片空间按钮
	    allowFileManager:true,
	    //图片空间按钮的URL
	    fileManagerJson:'项目名/article/showImages',
	    //文件上传的URL
	    uploadJson:'项目名/article/upload',
	    //指定后台接收的图片名称
	    filePostName:'image',
	    //失去焦点后保存文本域内容
	    afterBlur:function () {
   
	        this.sync();
	    }
	});

第二种初始化方法：集成项目时可能不出效果，可直接使用第一种初始化方法；

	<script>
	   KindEditor.ready(function(K) {
   
	        window.editor = K.create('#editor_id',{
   
	        	//设置编辑器大小
	            width:'1000px',
	            height:'400px',
	            //显示图片空间按钮
	            allowFileManager:true,
	            //图片空间按钮的URL
	            fileManagerJson:'项目名/article/showImages',
	            //文件上传的URL
	            uploadJson:'项目名/article/upload',
	            //指定后台接收的图片名称
	            filePostName:'image',
	            //失去焦点后保存文本域内容
			    afterBlur:function () {
   
			        this.sync();
			    }
	        });
	    });
	</script>

图片空间与上传图片

1. 图片空间的实现

1. 初始化设置，在初始化编辑器设置显示图片空间按钮并设置图片空间URL

		//显示图片空间按钮
	    allowFileManager:true,
	    //图片空间按钮的URL
	    fileManagerJson:'项目名/article/showImages',

2. 后台代码编写

	@RequestMapping("showImages")
    public Images showImages(HttpServletRequest request){
   
        Images images = new Images();
        //获取图片文件夹中的数据
        File file = new File(request.getSession().getServletContext().getRealPath("/view/article/image"));
        File[] files = file.listFiles();
        //设置数量
        images.setTotal_count(files.length);
        //设置url
        String url = "http://"+request.getServerName()+":"+request.getServerPort()
                +request.getContextPath()+"/view/article/image/";
        images.setCurrent_url(url);
        //设置集合人数据
        List<Object> list = new ArrayList<>();
        for (File file1 : files) {
   
            Map<String, Object> map = new HashMap<>();
            map.put("is_dir",false);
            map.put("has_file",false);
            map.put("filesize",file1.length());
            map.put("is_photo",true);
            //使用FilenameUtils时需要导入commons-io包
            map.put("filetype", FilenameUtils.getExtension(file1.getName()));
            map.put("filename",file1.getName());
            map.put("datetime",new Date());
            list.add(map);
        }

        images.setFile_list(list);

        return images;
    }

返回值说明：根据官方demo查得图片空间返回值如下。于是封装了Images对象属性current_url(String)、total_count(Integer)，注意类型一定不能错。本想把上述map也封装一个对象，但get、set方法总是出错。

注意：使用FilenameUtils时需要导入commons-io包

{
   
    "moveup_dir_path": "",
    "current_dir_path": "",
    "current_url": "/ke4/php/../attached/",
    "total_count": 3,
    "file_list": [
        {
   
            "is_dir": false,
            "has_file": false,
            "filesize": 208736,
            "dir_path": "",
            "is_photo": true,
            "filetype": "jpg",
            "filename": "1241601537255682809.jpg",
            "datetime": "2018-06-06 00:36:39"
        },
        {
   
            "is_dir"