- 前端 (KindEditor)：配置 KindEditor，使其在点击图片上传按钮时,能够向后端指定的接口发送文件。
- 后端 (Java)：创建一个接口（通常是 Servlet 或 Spring Boot Controller）来接收前端的文件请求，处理文件上传，并返回 KindEditor 所需格式的 JSON 响应。
下面我将提供一个完整、详细的步骤和代码示例，使用最主流的 Spring Boot 框架来处理后端逻辑。
（图片来源网络，侵删）
整体流程图
graph TD
A[用户在 KindEditor 中点击“图片”按钮] --> B[KindEditor 弹出图片上传对话框];
B --> C[用户选择本地图片文件];
C --> D[KindEditor 通过 POST 请求将文件发送到后端配置的 URL];
D --> E{后端接收请求};
E --> F[验证文件类型、大小等];
F --> G[将文件保存到服务器指定目录];
G --> H[生成文件的访问 URL];
H --> I[构建 KindEditor 规定的 JSON 响应];
I --> J[将 JSON 响应返回给前端];
J --> K[KindEditor 接收到响应，成功后将图片插入到编辑器中];
第一步：前端集成 KindEditor
你需要将 KindEditor 的文件引入到你的 HTML/JSP 页面中。
下载 KindEditor
从 KindEditor 官网下载最新版本：http://kindeditor.net/down.php
引入文件
在你的页面中引入 KindEditor 的 CSS 和 JS 文件。
<!-- 引入 KindEditor 核心文件 --> <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
初始化 KindEditor 并配置上传接口
这是最关键的一步，在初始化 KindEditor 时，通过 items 配置工具栏，通过 uploadJson 指定图片上传的后端接口地址。
（图片来源网络，侵删）
<textarea id="editor_id" name="content" style="width:800px;height:400px;">
这里是初始化的文本。
</textarea>
<script>
KindEditor.ready(function(K) {
// 创建编辑器
window.editor = K.create('#editor_id', {
width: '800px',
height: '400px',
// 配置工具栏，确保有 'image' 按钮
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', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'wordimage', ' '|, 'about'
],
// ----------------- 核心配置 -----------------
// 1. 图片上传接口的URL
uploadJson : '/api/upload/image',
// 2. 文件上传后，服务器返回的JSON格式必须符合KindEditor的要求
// 格式: {"error": 0, "url": "图片访问路径"}
// 或: {"error": 1, "message": "错误信息"}
// 3. (可选) 图片上传后，在“网络图片”选项卡中显示的服务器文件路径
// fileManagerJson : '/api/fileManager',
// 4. (可选) 允许上传的图片类型
allowImageUpload : true,
allowImageRemote : false, // 禁用远程图片
extraFileUploadParams : {
// 可以额外传递的参数，比如CSRF token
// 'token': 'your-csrf-token'
}
});
});
</script>
关键配置说明：
uploadJson: '/api/upload/image'：这个 URL 就是前端向后端发送图片请求的地址。请确保这个地址与后端 Controller 中的映射路径完全一致。- KindEditor 对后端返回的 JSON 有严格格式要求,后端必须遵守。
第二步：后端实现 (Spring Boot)
我们使用 Spring Boot 来创建一个 RESTful 接口来处理文件上传。
添加依赖
在 pom.xml 文件中添加处理文件上传和 JSON 转换的依赖。
<dependencies>
<!-- Spring Boot Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Lombok (简化代码) -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- Commons FileUpload (Spring Boot Web 已包含，但明确列出有助于理解) -->
<!--
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
-->
</dependencies>
配置文件上传
在 application.properties 或 application.yml 中配置文件上传的相关参数。
（图片来源网络，侵删）
application.properties
# 设置单个文件的最大大小 (10MB) spring.servlet.multipart.max-file-size=10MB # 设置总请求的最大大小 (包含多个文件) (100MB) spring.servlet.multipart.max-request-size=100MB # (可选) 设置文件上传的临时目录 # spring.servlet.multipart.location=/tmp
创建 Controller
创建一个 Controller 来处理 /api/upload/image 请求。
KindEditorUploadController.java
package com.example.demo.controller;
import com.example.demo.utils.KindEditorResult;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
@Slf4j
@RestController
@RequestMapping("/api/upload")
public class KindEditorUploadController {
// 从配置文件中读取文件上传的根目录
@Value("${file.upload.path}")
private String uploadPath;
/**
* KindEditor 图片上传接口
* @param fileKindEditor KindEditor 上传的文件，参数名必须与前端表单中 input 的 name 一致
* @return KindEditor 规定的 JSON 格式
*/
@PostMapping("/image")
public KindEditorResult uploadImage(@RequestParam("imgFile") MultipartFile fileKindEditor) {
log.info("接收到图片上传请求: {}", fileKindEditor.getOriginalFilename());
// 1. 校验文件是否为空
if (fileKindEditor.isEmpty()) {
return KindEditorResult.error("请选择要上传的文件");
}
// 2. 校验文件类型 (只允许图片)
String originalFilename = fileKindEditor.getOriginalFilename();
String contentType = fileKindEditor.getContentType();
if (!contentType.startsWith("image/")) {
return KindEditorResult.error("只允许上传图片文件");
}
try {
// 3. 创建目标文件目录 (按年/月 创建)
SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM");
String datePath = sdf.format(new Date());
File destDir = new File(uploadPath + File.separator + datePath);
if (!destDir.exists()) {
destDir.mkdirs();
}
// 4. 生成新的文件名 (防止重名)
String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf("."));
String newFileName = UUID.randomUUID().toString() + fileSuffix;
// 5. 构建目标文件
File destFile = new File(destDir, newFileName);
// 6. 保存文件到服务器
fileKindEditor.transferTo(destFile);
// 7. 构建 KindEditor 需要的成功响应
// KindEditor 要求的格式: {"error": 0, "url": "图片访问的相对路径或绝对路径"}
String fileUrl = "/uploads/" + datePath + "/" + newFileName;
return KindEditorResult.success(fileUrl);
} catch (IOException e 
