1.首先，想在项目中引入相关的jar包
2.html页面中加入相关的引用
<!-- kindeditor --> <script type="text/javascript" th:src="@{/lib/kindeditor/kindeditor.js}"></script> <script type="text/javascript" th:src="@{/lib/kindeditor/lang/zh_CN.js}"></script>
<th>公告内容:</th>
<td>
<textarea id="detail" name="detail" style="width:100%;height:200px;">
</textarea>
</td>
3.js文件中的方法的处理
//介绍富文本编辑器 KindEditor.ready(function(K) { introEditor = K.create("#detail", { width : 100, minHeight : '300px', uploadJson : parent.baseUrl + "file/kindeditorUploadImg", items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about', 'fullscreen' ], }); });
4.富文本编辑器的赋值
introEditor.html(),
detail : introEditor.html(redner.detail)
5.富文本编辑器上传图片方法的控制器的具体实现
@RequestMapping(value = "/kindeditorUploadImg") @ResponseBody public editorDto imageUeditorStorage(@ModelAttribute("kindUpload") @Valid KindUpload kindUpload) throws IOException { editorDto dto = new editorDto(); MultipartFile file = kindUpload.getImgFile(); if (!file.isEmpty()) {
//将上传文件的后缀名进行小写处理 String ext = StorageUtility.getFileExt(file.getOriginalFilename());
//创建新的文件的名称 String newFileName = System.currentTimeMillis() + ext;
// File storageFile = storageUtility.getNewStorageFile(newFileName, ""); String OriginalFilename = file.getOriginalFilename(); FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(storageFile)); long fileId = AttachmentFileService.createFile(newFileName, OriginalFilename, storageFile.getPath(), "test", 1); dto.setUrl(storageUtility.getFileViewPath(String.valueOf(fileId))); } dto.setError(0); return dto; }