kindeditor在java项目中的应用以及图片上传配置

jimisun      2022-04-07     172

关键词:

在官网下载Kindededitor的开发包
 
在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中找到,注意下面图jar包的位置
 
 
将官网开发包中的此jsp文件放在你的项目中,其实富文本编辑器在执行文件上传的时候就是请求的是这个upload_json.jsp文件,这个upload_json.jsp文件起始就相当与一个用于文件上传的Servlet
 
 
将kindeditor富文本编辑器需要使用到的css,js文件加入项目中,在这里最常用使用的是默认的css文件,全局的js文件,中文的js文件,如下图所示
 
 

 

现在我们已经将kindeditor所需要的所有东西都加入项目中了,想在让我们来编辑一个展示页面来看卡看你kindetidor是什么效果,展示页面的html代码我粘贴在下面,方便各位看官观看
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is test kindetior</title>

    <link href="http://localhost:8080/test/kindeditor-4.1.10/themes/default/default.css"
          type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8"
            src="http://localhost:8080/test/kindeditor-4.1.10/kindeditor-all-min.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="http://localhost:8080/test/kindeditor-4.1.10/lang/zh_CN.js"></script>
</head>

<body>


<form method="post" action="http://localhost:8080/test/kindservlet">
              <textarea id="editor_id" name="content"
                        style="width: 700px; height: 300px;">
        请输入......
        </textarea>
    <input type="submit" value="提交" onclick="submitForm()">
</form>

<script>
    KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id', {
//这里是指定的文件上传input的的属性名
            filePostName: "uploadFile",
//这里就是指定文件上传的请求地址,上面也已经说了,upload_json.jsp就相当去一个servlet去进行保存文件,这个地方很重要
            uploadJson: 'upload_json.jsp',
            resizeType: 1,
            allowPreviewEmoticons: true,
            allowImageUpload: true,
        });
    })
</script>

</body>

 

效果如下
 
 
在这里我要提一下,这个富文本编辑器其实就是一个表单,表单的请求地址就是上面展示的html中的http://localhost:8080/test/kindservlet,这个servlet是自己写的用于保存<textarea id="editor_id" name="content" style="width: 700px; height: 300px;"> 属性名为content的值,当前这个Servlet接受过来的都是字符,你可能会有疑问?我要在富文本中上传图片或者图片上传到哪里了呢?在这里我要说一下,很多新接触的伙伴们可能会有些陌生,其实当我们在进行上传图片的时候,已经请求了upload_json.jsp这个jsp文件,这个jsp的功能是和保存文件的servlet的功能是一样的,所以上传的文件按是在这个upload_json.jsp文件中已经保存了,并且这个upload_json.jsp文件会在保存了文件后响应一个路径地址,也就是文件保存的地址,相应的地址会插入到content文本域中,格式是<img src="http://xxxx.com/xxx/xxx.jsp">,插入数据库的就是<img src="http://xxxx.com/xxx/xxx.jsp">就是这个img标签,所以在查数据库的时候图片就显示出来了,具体的文件上传文件逻辑官方来写在upload_json.jsp文件中的。
 
现在我们来进行上传一张图片试一下,看看能不能上传
 
 

 

 
 

 

很遗憾,并没有上传成功,现在提示上传的目录不存在,如果没有错的话应该是upload_json.jsp这个文件中的问题,现在我们来看一下upload_json.jsp里面是怎么写的
可以看到图片上传的时候默认是将图片文件上传到项目的attached目录下,现在我们项目中没有这个文件夹,现在让我们在项目的编译的目录下创建一个名为attached的文件夹,注意是项目的编译目录
 
现在我们再来试一下能否上传图片
 
编译目

 

录的attached文件夹里面也有了这张图片
可以看到图片已经上传成功了,并且upload_json.jsp又把上传成功的图片地址给回传了回来,点击富文本的左上角可以看到到真正表单需要提交的东东。。
 
其实表单再上传的时候就是上传的这些内容哈,所以从数据库取出来这些文本的时候就能够直接显示了哈,是不是很简单。
 
现在我们来分析一下这个upload_json.jsp文件的一点核心的东西,其实在上传图片到upload_json.jsp的时候,kindetidor富文本也不知道上传成功不成功,也不知道该如何提示用户是否上传成功,那么它是怎么知道是否是上传成功的呢?来看一段upload_json.jsp中的源码
可以看到在upload_json.jsp保存成功文件的时候会返回一个JSONObject对象,对象中放了两个map,一个是error,一个url,可以看到在上传成功的时候就返回个Map,一个是error值为0代表已经上传成功,一个是url代表的是上传成功后的图片的地址用于在富文本中回显图片。
 
可以看到当图片保存失败或者有错误的时候返回的也是一个经过toString的Object对象,这个对象中同样有个Map一个是error值为1代表上传失败,一个是message代表着错误原因,也就是为什么会失败。
后面我们可以重写这个upload_json.jsp文件,应为官方在代码里面写了不太安全,还请各位看官自己从新写一下,大概也就是吧upload_json中的文件上传代码copy到一个Servlet上,再改一下展示页面的文件上传请求地址,就ok了.
 
 

 下面就是我将upload_json.jsp中的文件上传代码copy到一个servlet中,各位看官可以参考一下修改,在下没做什么修改。

package kindeditor;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.simple.JSONObject;

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 java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.*;

/**
 * @Author:jimisun
 * @Description:
 * @Date:Created in 16:26 2018/8/2
 * @Modified By:
 */
@WebServlet("/kindeditor/upload")
public class KindEditorUpload extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置Response响应的编码
        resp.setContentType("text/html; charset=UTF-8");


        //获取一个Response的Write对象
        PrintWriter writer = resp.getWriter();


        //文件保存目录路径
        String savePath = req.getServletContext().getRealPath("/") + "attached/";
        System.out.println(savePath);

        //文件保存目录URL
        String saveUrl = req.getContextPath() + "/attached/";
        System.out.print(saveUrl);

        //定义允许上传的文件扩展名
        HashMap<String, String> extMap = new HashMap<String, String>();
        extMap.put("image", "gif,jpg,jpeg,png,bmp");
        extMap.put("flash", "swf,flv");
        extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
        extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");


        //最大文件大小
        long maxSize = 1000000;


        //判断是否是一个文件
        if (!ServletFileUpload.isMultipartContent(req)) {
            writer.println(getError("请选择文件。"));
            return;
        }
        //检查目录
        File uploadDir = new File(savePath);
        if (!uploadDir.isDirectory()) {
            writer.println(getError("上传目录不存在。"));
            return;
        }
        //检查目录写权限
        if (!uploadDir.canWrite()) {
            writer.println(getError("上传目录没有写权限。"));
            return;
        }

        String dirName = req.getParameter("dir");
        if (dirName == null) {
            dirName = "image";
        }
        if (!extMap.containsKey(dirName)) {
            writer.println(getError("目录名不正确。"));
            return;
        }


        //创建文件夹
        savePath += dirName + "/";
        saveUrl += dirName + "/";
        File saveDirFile = new File(savePath);
        if (!saveDirFile.exists()) {
            saveDirFile.mkdirs();
        }
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String ymd = sdf.format(new Date());
        savePath += ymd + "/";
        saveUrl += ymd + "/";
        File dirFile = new File(savePath);
        if (!dirFile.exists()) {
            dirFile.mkdirs();
        }

        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");
        List items = null;
        try {
            items = upload.parseRequest(req);
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
        Iterator itr = items.iterator();
        while (itr.hasNext()) {
            FileItem item = (FileItem) itr.next();
            String fileName = item.getName();
            long fileSize = item.getSize();
            if (!item.isFormField()) {
                //检查文件大小
                if (item.getSize() > maxSize) {
                    writer.println(getError("上传文件大小超过限制。"));
                    return;
                }
                //检查扩展名
                String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
                if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) {
                    writer.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
                    return;
                }

                SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
                String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
                try {
                    File uploadedFile = new File(savePath, newFileName);
                    item.write(uploadedFile);
                } catch (Exception e) {
                    writer.println(getError("上传文件失败。"));
                    return;
                }

                JSONObject obj = new JSONObject();
                obj.put("error", 0);
                obj.put("url", saveUrl + newFileName);
                writer.println(obj.toJSONString());
            }
        }


        //将writer对象中的内容输出
        writer.flush();
        //关闭writer对象
        writer.close();
    }


    //一个私有的方法,用于响应错误信息
    private String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", 1);
        obj.put("message", message);
        return obj.toJSONString();
    }


}
View Code

好啦到这里了该下班了,写了一下午,真累。。。。

使用kindeditor完成图片上传(代码片段)

前端使用KindEditor,后台使用Springmvc1拷贝KindEditor相关文件到项目中拷贝KindEditor相关文件到项目中2准备一个jsp页面页面中我准备了一个超链接,点击就可以打开KindEditor批量图片上传对话框1.jsp页面中需要引入KindEditor相关的css和js... 查看详情

kindeditor富文本框编辑器上传图片功能实现,基于java项目

1.HTML标签与jquery代码<textareaid="editor_id"style="width:200px;height:200px;"></textarea><scripttype="text/javascript"src="../js/jquery.min.js"></script> <scripttype="text/javas 查看详情

ssm项目中kindeditor的图片上传插件,浏览器兼容性问题

...:Content-Type:text/plan;charset=UTF-8指定响应结果的content-type:KindEditor的多图片上传插件最后响应的content-type是text/pl 查看详情

django——文本编辑器(代码片段)

...博客项目中,为了支持用户的在线编辑博客,我们选用了kindeditor这个强大的编辑器。以下是对kindeditor的简介,以及在Django中引入这个编辑器的方法:)1.KindEditor是什么?KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在... 查看详情

java容器在实际web项目中应用

...inkinginJava的知识和实际开发中业务场景讲述一下容器在Web项目中的用法。可结合图片代码了解Java中的容器 备注:这个地方,参考于朝向远方的博客Java容器详解 ,既然前人总结的这么好,我就直接拿来用,在这里更注重... 查看详情

在dwz框架中整合kindeditor复文本框控件

今天上午在DWZ框架中整合kindeditor复文本框控件,发现上传图片是老是提示“上传中,请稍候...”,上网查看别人说可能是文件路径问题,在想以前在其他项目中用这个控件一直没问题,到这里怎么会出现这个错误呢?于是... 查看详情

kindeditor的简单使用,以及上传图片预览图片,用户删除图片后的数据处理(重点)(代码片段)

http://www.cnblogs.com/wupeiqi/articles/6307554.html简单使用:<divclass="comm"><formmethod="POST"enctype="multipart/form-data">%csrf_token%<divstyle="margin:0auto;"class="comment-area"> 查看详情

kindeditorjs取值问题以及上传图片后回调等

KindEditor.ready(function(K){vareditor=K.create('#editor_id',{//上传管理uploadJson:'/js/kindeditor/asp.net/upload_json.ashx',//文件管理fileManagerJson:'/js/kindeditor/asp.net/file_manager_ 查看详情

kindeditor

1、进入官网  KindEditor是一种在线HTML编辑器插件,能实现的效果就是我们平时发表文章以及评论的时候可以对文本进行样式的编辑,以及上传图片、插入代码等。类似的编辑器插件还有:TinyEditor、UEEditor、CkEditor等。2、下载官... 查看详情

css的应用背景的属性以及图片的定位

...及选择器的优先级问题!行内样式就是代码写在具体网页中的一个元素内;比如:<divstyle="color:#f00"></div>内嵌式:就是在</head>前面写;比如:<styletype="text/css">.div{color:#F00}</style>外部式:就是引用外 查看详情

kindeditor无法获取word文档中的图片,如何才能获取?用asp代码网站上使用~

有那些大神能帮助我啊参考技术AkindEditor怎么和WORD扯一起去了!追问在编辑器里复制world里的图片,编辑器里不显示图片啊追答那肯定不能显示了,你得用图片上传的形式插进编辑器里面!追问怎么上传?不会写啊?本回答被提... 查看详情

java反射在android中的应用,以及注意事项

...details/53402586本文出自【DylanAndroid的博客】Java反射在Android中的应用,以及注意事项在【玩转SQLite系列】(七)打造轻量级ORM工具类SQLiteDbUtil操作数据库这篇文章当中,我封装了一个轻量级的数据库OR 查看详情

django项目中使用kindeditor富文本编辑器(代码片段)

...atic文件下前端引入<scripttype="text/javascript"src="/static/back/kindeditor/kindeditor-all.js"></script><script>KindEditor.ready(function(K)window.editor=K.create(‘#content‘,#加上这句话可以使jquery能获取到富文本编辑器的内容#afterBlur:function()this.s... 查看详情

kindeditor上传问题

我的网站程序是asp的,下载的最新的kindeditor,按照官网上的使用方法配置的,现在不需要本地上传的功能都可以使用了,需要本地上传的功能,比如上传图片,批量上传图片,上传文件等等,都用不了,上传图片的时候,选择... 查看详情

kindeditor无法获取word文档中的图片,如何才能获取

你好,可以用后端程序自己获取嘛~~~这个功能太简单了比如php的正则匹配:preg_match_all(\'/<img\\s+src=\\"[\\S]+\\.\\w+\\"\\s+[title=\\"\\w*\\s*\\"]*\\s*[alt=\\"\\S*\\"]*[\\s*height=\\"\\d+\\"]*[\\s*width=\\"\\d+\\"]*\\s*\\/>/i\',$_POST[\'content\'],$images,PREG_PATTE... 查看详情

bbs项目四(代码片段)

今日内容概要后台管理文章查增 改删前端编辑器(kindeditor富文本编辑器)处理XSS攻击以及文章摘要的处理编辑器上传图片修改用户头像bbs小总结后期建议(聊一聊)今日内容详细后台管理"""当一个文件夹下文件比较多的... 查看详情

kindeditor编辑器上传图片问题,总是选择上传东西(比如图片)的时候,不能上传,无限加载中的界面

用Kindeditor编辑器上传图片时出现“服务器故障”,小的从来没有用用过这个这就造成了文件上传不能超过200k,而事实上是提交数据不能超过200k,你可以参考技术A造成这个原因可能是你负责上传的upload_json.php文件有问题,请检查... 查看详情

kindeditor,kindeditor编辑内容无法保存,并且无法上传图片或者文件

我在kindeditor官网上下载了源码,然后按照官网的使用教程在我的ASP的页面上插入了编辑器。可是问题来了,首先我保存编辑的信息后提示保存成功,再打开发现刚才在编辑器里面编辑的信息没有。第二,我上传图片时,点击浏览... 查看详情