此案例 demo 为 SpringBoot 开发
1、官网下载相关资源包：http://kindeditor.net/down.php
2、编写页面（引入相关JS）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kindeditor富文本编辑器</title>
<link href="/kindeditor-4-1-10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/jquery-3.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/kindeditor-4-1-10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/kindeditor-Own/kindeditor.js"></script>
</head>
<body>
<textarea id="itemAddForm" style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
</body>
</html>
3、编写 JS（/kindeditor-Own/kindeditor.js） 创建实例
var itemAddEditor;
//页面初始化完毕后执行此方法
$(function () {
var TT = TTO = {
// 编辑器参数
kingEditorParams: {
//指定上传文件参数名称
filePostName: "uploadFile",
//指定上传文件请求的url。
uploadJson: ‘/pic/upload‘,
//上传类型，分别为image、flash、media、file
dir: "image"
},
createEditor: function (select) {
return KindEditor.create(select, TT.kingEditorParams);
}
};
//创建富文本编辑器
itemAddEditor = TTO.createEditor("#itemAddForm");
});
4、编写后台 配置虚拟路径（MyWebAppConfiguration）
package com.editors.kindeditor.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class MyWebAppConfiguration extends WebMvcConfigurerAdapter {
/**
* 添加一些虚拟路径的映射
* 静态资源路径和上传文件的路径
*
* @param registry
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
/**
* @Description: 对文件的路径进行配置, 创建一个虚拟路径/Path/** ，即只要在< img src="/Path/picName.jpg" />便可以直接引用图片
*这是图片的物理路径 "file:/+本地图片的地址"
*/
registry.addResourceHandler("/Path/**").addResourceLocations("file:/C:/Users/lenovo/AppData/Local/Temp/tomcat-docbase.2975979620477460781.8080/upload/");
super.addResourceHandlers(registry);
}
}
5、图片上传服务
package com.editors.kindeditor.controller;
import com.editors.utils.JsonUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
@Controller
public class KindeditorController {
@RequestMapping("/kindeditor")
public String kindeditor() {
return "kindeditor/kindeditor";
}
/**
* 返回 复杂类型 容易产生浏览器兼容性问题
* 原因：
* 跟 @ResponseBody 默认行为有关
* String类型可直接打回页面，而复杂类型无法直接打回，需要先转换为json
*/
@RequestMapping("/pic/upload")
@ResponseBody
public String picUpload(MultipartFile uploadFile, HttpServletRequest request) {
Map map = new HashMap<>();
if (!uploadFile.isEmpty()) {
String saveFileName = uploadFile.getOriginalFilename();
File saveFile = new File(request.getSession().getServletContext().getRealPath("/upload/") + saveFileName);
if (!saveFile.getParentFile().exists()) {
saveFile.getParentFile().mkdirs();
}
String path = "/Path/" + saveFileName;
System.out.println("path={" + path + "}");
try {
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(saveFile));
out.write(uploadFile.getBytes());
out.flush();
out.close();
map.put("error", 0);
map.put("url", path);
} catch (Exception e) {
e.printStackTrace();
map.put("error", 1);
map.put("url", path);
return "上传失败," + e.getMessage();
}
} else {
map.put("error", 1);
map.put("url", "上传失败，因为文件为空.");
}
return JsonUtils.objectToJson(map);
}
}
6、执行效果：
原文地址：https://www.cnblogs.com/codingmode/p/11423250.html
时间： 2024-10-29 00:24:31