KindEditor是一个功能十分齐全的富文本编辑器，官网地址：http://kindeditor.net/demo.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作为容器 -->
<textarea id="editor" name="editor" style="width:700px;height:300px;">请输入内容</textarea>
<button type="submit">提交</button>
</form>
<!-- 引入KindEditor的2个js文件，上线时kindeditor-all.js换为min版 -->
<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。
