大连模板网建站5网站开发之美

KindEditor 是什么？

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

官网: http://kindeditor.net/about.php
其他常用的富文本编辑器:
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/
有兴趣的小伙伴可以找时间探索一下哦!

导入KindEditor文件，添加前端页面

从官网下载好文档之后，将相关文件导入到我们的项目中，如下图；并在需要富文本编辑框的页面中引入相应的文件。

1、导入所需的脚步和CSS

<!-- 富文本编辑器 -->
<link rel="stylesheet" href="/sell/kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="/sell/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/sell/kindeditor/lang/zh-CN.js"></script>
//初始化KindEditor编辑器
<script type="text/javascript">var editor;KindEditor.ready(function (K) {editor = K.create('textarea[name="content"]', {//是否允许浏览服务器已上传文件,默认是falseallowFileManager: true,uploadJson :"/sell/speech/uploadFile"});});
</script>

2、添加内容标签

<div class="form-group"><label>内容:</label><textarea  name="content" type="text" class="form-control" value="${(productInfo.productName)!''}"></textarea>
</div>

spring boot后台

1、首先配置虚拟文件目录

#定义文件路径
file:baseUrl: http://192.168.1.143:8080/sellstaticAccessPath: /static/image/*uploadFolder: /image/

2、WebMvcConfigurer处理

@Data
@ConfigurationProperties(prefix = "file")
@Component
public class UploadFilePathConfig implements WebMvcConfigurer {private String staticAccessPath;private String uploadFolder;private String baseUrl;@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);}
....部分省略

3、处理图片上传方法

@RestController
@RequestMapping("/speech")
@Slf4j
public class SpeechController {@Autowiredprivate UploadFilePathConfig filePathConfig;/*** 提供KindEditor作文件上传使用* @param request* @param response* @throws Exception*/@PostMapping("/uploadFile")public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception {PrintWriter writer = response.getWriter();// 文件保存目录路径String savePath = filePathConfig.getUploadFolder();String saveUrl = filePathConfig.getBaseUrl() + File.separatorChar + "static/image" + File.separatorChar;// 定义允许上传的文件扩展名HashMap<String, String> extMap = new HashMap<String, String>();extMap.put("image", "gif,jpg,jpeg,png,bmp");// 最大文件大小long maxSize = 1000000;response.setContentType("text/html; charset=UTF-8");if (!ServletFileUpload.isMultipartContent(request)) {writer.println(getError("请选择文件。"));return;}File uploadDir = new File(savePath);// 判断文件夹是否存在,如果不存在则创建文件夹if (!uploadDir.exists()) {uploadDir.mkdirs();}// 检查目录写权限if (!uploadDir.canWrite()) {writer.println(getError("上传目录没有写权限。"));return;}String dirName = request.getParameter("dir");if (dirName == null) {dirName = "image";}if (!extMap.containsKey(dirName)) {writer.println(getError("目录名不正确。"));return;}MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;Map<String, MultipartFile> fileMap = mRequest.getFileMap();String fileName = null;for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet().iterator(); it.hasNext();) {Map.Entry<String, MultipartFile> entry = it.next();MultipartFile mFile = entry.getValue();fileName = mFile.getOriginalFilename();// 检查文件大小if (mFile.getSize() > maxSize) {writer.println(getError("上传文件大小超过限制。"));return;}String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) {writer.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));return;}UUID uuid = UUID.randomUUID();String path = savePath + uuid.toString() + "." + fileExt;saveUrl = saveUrl + uuid.toString() + "." + fileExt;BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(path));FileCopyUtils.copy(mFile.getInputStream(), outputStream);log.info("【提交图片】参数正确, saveUrl={}",saveUrl);JSONObject obj = new JSONObject();obj.put("error", 0);obj.put("url", saveUrl);writer.println(obj.toString());}}....部分代码省略

开始运行测试

效果如图所示：