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"]', {
//是否允许浏览服务器已上传文件,默认是false
allowFileManager: 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/sell
staticAccessPath: /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;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);
}
....部分省略
3、处理图片上传方法
@RestController
@RequestMapping("/speech")
@Slf4j
public class SpeechController {
@Autowired
private 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());
}
}
....部分代码省略
开始运行测试
效果如图所示: