Java中使用kindEditor富文本编辑器
上一篇简单写了一下wangeditor富文本的用法，现在简单介绍一下kindeditor富文本编辑器的用法，可以通过kindEditor文档地址查看kindEditor的文档进行开发。
接下来介绍一下我的用法：
首先需引入kindEditor的js
接下来初始化富文本
话不多说直接上代码，首先提交页面代码
//kindeditor富文本编辑器
KindEditor.ready(function (K) {
var KE = K.create('#editor_id', {
//文件上传接收参数名
filePostName: "uploadFile",
//这里就是指定文件上传的请求地址
uploadJson: '/pic/uploadkindeditor',
//2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
resizeType: 1,
//设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
pasteType: 1,
//HTML特殊代码过滤
filterMode : true,
//true时鼠标放在表情上可以预览表情，默认true
allowPreviewEmoticons: true,
//true时显示图片上传按钮
allowImageUpload: true,
//利用该方法处理当富文本编辑框失焦之后，立即同步数据
afterBlur: function(){
KindEditor.sync("#editor_id") ;
},
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'table', 'hr', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],//自定义富文本功能
afterChange : function() {
//字数统计包含HTML代码
$('.word_count1').html(this.count());
//字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字
$('.word_count2').html(this.count('text'));
//设定限制字数
var limitNum = 20000;
var pattern = '还可以输入' + limitNum + '字';
//输入显示
$('.word_surplus').html(pattern);
if(this.count('text') > limitNum) {
pattern = ('字数超过限制，请适当删除部分内容');
//超过字数限制自动截取
var strValue = KE.text();
strValue = strValue.substring(0,limitNum);
KE.text(strValue);
KE.focus();
KE.appendHtml('');
} else {
//计算剩余字数
var result = limitNum - this.count('text');
pattern = '还可以输入' + result + '字';
}
//输入显示
$('.word_surplus').html(pattern);
}
});
})
使用textarea进行富文本提交，并获取富文本内容
您当前输入了 0 个文字。（字数统计包含HTML代码。）
接下来进行后台上传图片代码编写
我这里的图片上传采取的是上传到fastdfs服务器，可以直接调用保存接口，fastdfs具体配置在这不做讲解。
接下来后台上传代码
/**
* 富文本图片上传
* @param uploadFile
* @param redirectAttributes
* @return
*/
@PostMapping("/pic/uploadkindeditor")
public JSONObject singleFileUploadKindEdit(@RequestParam("uploadFile") MultipartFile uploadFile,
RedirectAttributes redirectAttributes) {
String path = "";
//定义允许上传的文件扩展名
String[] typeImg = {"jpeg", "png", "jpg", "gif", "bmp"};
String fileName = uploadFile.getOriginalFilename();
String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
if (ext != null) {
boolean booIsType = false;
for (int i = 0; i < typeImg.length; i++) {
if (typeImg[i].equals(ext.toLowerCase(Locale.ENGLISH))) {
booIsType = true;
}
}
//类型正确时上传
if (booIsType) {
JSONObject result = new JSONObject();
try {
path = FastDFSClient.saveFile(uploadFile);
} catch (IOException e) {
log.info("upload file failed", e);
}
result.put("error", 0);
result.put("url", FastDFSConfig.getTrackerServerHost() + path);
return result;
} else {
log.info("该图片类型不能上传：" + ext);
result.put("error",1);
result.put("message","该图片类型暂不支持上传")
return result;
}
} else {
//未选择图片
log.info("图片扩展名不能为空");
result.put("error",1);
result.put("message","该图片扩展名为空，请重新选择")
return result;
}
}
以上就是简单的kindEditor使用方法。