富文本编辑器KindEditor

蔚落 2022-12-11 06:25 382阅读 0赞

### 目录 ###

*   *   *  下载引入
         *  前端使用KindEditor
         *  后端处理表单
         *  ajax

KindEditor是一个功能十分齐全的富文本编辑器，官网地址：[http://kindeditor.net/demo.php][http_kindeditor.net_demo.php]

### 下载引入 ###

[ http://www.kindsoft.net/down.php][http_www.kindsoft.net_down.php]

*  删掉asp、asp.net、jsp、php
 *  lang里面只保留zh-CN.js  
    语言只使用简体中文
 *  themes里删掉qq、simple  
    我只使用默认的主题default，qq、simple这2种主题都不用，也可以保留

弄好之后放在reources/plugins下

### 前端使用KindEditor ###

<body>
    <form action="/handler" method="post">
        
        <textarea id="editor" name="editor" style="width:700px;height:300px;">请输入内容</textarea>
        <button type="submit">提交</button>
    </form>
    
    
    <script charset="utf-8" src="/plugin/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="/plugin/kindeditor/lang/zh-CN.js"></script>
        
    <script> // 此变量代表KindEditor富文本编辑器，如果后续不使用此变量，也可以放在函数中 let editor; // 创建KindEditor富文本编辑器，也可以在js或jq的就绪函数中创建 KindEditor.ready(function () { editor = KindEditor.create('#editor', { uploadJson: '/fileHandler', //指定处理KindEditor上传文件的controller filePostName: 'file' //指定KindEditor上传文件使用的字段名 }); }); </script>
    
    </body>

**常用方法**

*  editor.focus() 聚焦
 *  editor.isEmpty() 判断文本域中是否有内容，返回boolean
 *  editor.html() 获取文本域的内容（转换为html代码） 返回string

如果使用ajx提交，可以用editor.html()获取文本域的内容放在data中；  
如果使用js或jq的val属性来获取文本域的内容，需要先sync()同步，不然获取到的值是剔除html标签的。

editor.sync();
    
    let str=document.getElementById("editor").value;
    // let str = $("#editor").val;

*  editor.html(string val) 设置文本域的内容，会自动解析val中的html标签。thymeleaf的 <th:utext>也可有同样的效果。

### 后端处理表单 ###

提交的是editor.html()，包含html标签（富文本），用一个String来接收。

如果把这个值作为json数据返回给浏览器，浏览器会解析其中的html标签。

**处理KindEditor上传的文件**

上传文件、文本域内容的处理是分开的

/** * 处理KindEditor上传的文件都用此方法处理 */
    @PostMapping("/fileHandler")
    @ResponseBody
    public Map fileUpload(HttpServletRequest request, @RequestParam("file") List<MultipartFile> fileList) { 
        Map map = new HashMap<String, Object>();
    
        // 检测用户是否上传了文件
        if (!fileList.isEmpty() && fileList.size()>0){ 
    
            // 处理上传文件
            for (MultipartFile tempFile:fileList){ 
                // 使用uuid防止文件重名，原文件名中包含扩展名，放最后面
                String newFilename= UUID.randomUUID()+"_"+tempFile.getOriginalFilename();
                File file = new File("/upload/" + newFilename);
                System.out.println(file.getPath());
                // 如果要对不同类型的文件做不同处理，可以判断文件类型，也可以根据原文件名来判断
                // String fileType = file.getContentType();
                try { 
                    // 保存文件
                    tempFile.transferTo(file);
                    map.put("error", 0);
                    map.put("url", file.getPath());
                } catch (IOException e) { 
                    e.printStackTrace();
                    map.put("error", 1);
                    map.put("message", "上传文件失败！");
                }
            }
        }
        else { 
            map.put("error", 1);
            map.put("message", "请先选择要上传的文件！");
        }
        return map;
    }

KindEditor的作者规定：要返回一个2个参数

*  error 结果代码，0表示成功，1表示失败
 *  如果成功传递保存路径；如果失败传递失败原因

### ajax ###

K.ajax(
    	'../xxx/xxx',
    	data => {   //回调函数
    		//.....
    	},
    	'POST',
    	{    //携带的数据
            name : 'chy',
            age : 20
    	}
    );

请求方式、携带的数据均可选，缺省请求方式时默认为get。

[http_kindeditor.net_demo.php]: http://kindeditor.net/demo.php
[http_www.kindsoft.net_down.php]: http://www.kindsoft.net/down.php