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的简单使用以及图片上传相关推荐

Django中static media的简单配置及图片上传实践
static & media 在Django应用的文件夹下,经常会发现这两个文件夹:static, media; static称为静态文件夹,用于存放CSS, JavaScript, 网站lo ...
简单的html图片上传工具
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
SSM+KindEditor实现富文本编辑器图片上传
场景 KindEitor官方文档: http://kindeditor.net/demo.php 实现效果下载Kindeditor 下载地址: http://kindeditor.net/down ...
kindeditor（一）实现图片上传jsp实现
最近应项目需求要求实现富文本编辑器的功能,曾经用ckeditor实现过,首先尝试用它实现,但是虽然ck有强大的功能,但是其界面风格比较刻板,修改起来比较困难而且,图片上传功能修改源码的话很繁琐,自己也 ...
vue点击图片后复制图片url_简单漂亮的（图床工具）开源图片上传工具——PicGo...
介绍 PicGo: 一个用于快速上传图片并获取图片URL链接的工具,由vue-cli-electron-builder构建的简单漂亮的图片上传工具!基于electron-vue开发,支持macOS,W ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法
近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中 ...
php上传图片中文,php图片上传方法
php图片上传方法发布于 2015-11-07 21:44:59 | 92 次阅读 | 评论: 0 | 来源: PHPERZ PHP开源脚本语言PHP(外文名: Hypertext Preproce ...
php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

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

Kindeditor的简单使用以及图片上传相关推荐

最新文章

热门文章