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

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

首先到官网下载相应的插件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);
	}

}

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

猜你喜欢