Kindeditor的简单使用以及图片上传

article/2025/9/24 11:36:33

详细的笔者也不是特别懂，但是基本的使用还是会的

首先到官网下载相应的插件http://kindeditor.net/down.php，下载完的文件打开后是这样的，看着有点多

但是我们只取出需要的，只有这么一点，复制到项目下，取名叫Kindeditor

然后上代码，这样就能用起来了

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
<script src="${pageContext.request.contextPath }/Kindeditor/kindeditor-all.js"></script><script src="${pageContext.request.contextPath }/Kindeditor/lang/zh-CN.js"></script><link href="${pageContext.request.contextPath }/Kindeditor/themes/default/default.css" /><script>KindEditor.ready(function(K) {K.create('#textarea_id', {uploadJson : '/News/Kindeditor/jsp/upload_json.jsp',//这里填写的是图片上传的绝对路径，News是我的项目名fileManagerJson : '/News/Kindeditor/jsp/file_manager_json.jsp',allowFileManager : true});});</script><body><textarea style="width: 800px;height: 500px;" id="textarea_id" name="textarea_id"></textarea></body>
</html>

但是想要上传图片还需要用到这个jsp文件里面的file_manager_json.jsp.txt和upload_json.jsp.txt

将着2个文件的后缀名改成jsp，然后就是最关键的一步，笔者在这里卡了有3，4个小时，jsp文件夹内lib下的3个jar包必须复制到项目的lib目录下，就算是Build Path了也是不行的，必须放到项目的lib下面，然后需要在WebContent下建一个attached文件夹

这样就可以进行图片上传了，要是想在servlet中获取文本内容（这里的文本内容指的是带html样式的文本），笔者在这里不再赘述，不清楚的可以去看https://blog.csdn.net/progammer10086/article/details/84034504我的这篇文件上传博客

下面给出我在后台获取值的servlet代码，用作参考

package com.news.web.admin.news;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.IOUtils;import com.news.domain.News;
import com.news.service.AdminCategoryService;
import com.news.service.AdminNewsService;
import com.news.service.AdminReporterService;@WebServlet("/adminAddNews")
public class AdminAddNewsServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String fileName = "";String tips = "";String text = "";String label = "";SimpleDateFormat format = new SimpleDateFormat("yyyy-mm-dd HH:mm:ss");String time = format.format(new Date());String cname = "";String nikename = "";try {// 1.创建磁盘文件项工厂// 作用：设置缓存文件的大小,设置临时文件存储的位置String path_temp = this.getServletContext().getRealPath("temp");DiskFileItemFactory factory = new DiskFileItemFactory(1024 * 1024, new File(path_temp));// 2.创建文件上传的核心类ServletFileUpload upload = new ServletFileUpload(factory);// 设置上传文件名称的编码格式upload.setHeaderEncoding("UTF-8");// 判断表单是否是文件上传的表单boolean multipartContent = upload.isMultipartContent(request);if (multipartContent) {// 是文件上传的表单// 解析request获得文件项集合List<FileItem> parseRequest = upload.parseRequest(request);if (parseRequest != null) {for (FileItem item : parseRequest) {// 判断是不是一个普通表单项boolean formField = item.isFormField();if (formField) {String name = item.getFieldName();if(name.equals("tips")) {tips = item.getString("UTF-8");// 对普通表单的内容进行编码}if(name.equals("label")) {label = item.getString("UTF-8");}if(name.equals("cid")) {cname = item.getString("UTF-8");}if(name.equals("rid")) {nikename = item.getString("UTF-8");}if(name.equals("textarea_id")) {text = item.getString("UTF-8");}} else {fileName = item.getName();// 获得文件名InputStream in = item.getInputStream();// 获得上传文件的内容String path_store = this.getServletContext().getRealPath("images");//获得项目路径OutputStream out = new FileOutputStream(path_store + "/" + fileName);IOUtils.copy(in, out);//调用io.jar里面的工具类in.close();out.close();// 删除临时文件item.delete();}}}} else {}} catch (FileUploadException e) {e.printStackTrace();}System.out.println(text);String image = "images/"+fileName;AdminCategoryService category_service = new AdminCategoryService();int cid = category_service.getAdminCidByName(cname);AdminReporterService reporter_service = new AdminReporterService();int rid = reporter_service.getAdminRidByNikeName(nikename);AdminNewsService news_service = new AdminNewsService();News news = new News();news.setTips(tips);news.setImage(image);news.setText(text);news.setLabel(label);news.setTime(time);news.setCid(cid);news.setRid(rid);news_service.adminAddNews(news);response.sendRedirect(request.getContextPath()+"/adminShowNews");}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}