ssh 使用 wangeditor3 富文本编辑器上传图片方法

最新推荐文章于 2024-03-27 11:34:44 发布

Cool__Xu

最新推荐文章于 2024-03-27 11:34:44 发布

阅读量5.7k

点赞数 3

分类专栏： ssh框架文章标签： ssh 富文本编辑器 wangeditor

本文链接：https://blog.csdn.net/Stephen__Xu/article/details/78536594

版权

ssh框架专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这段时间在搞一个小网站的项目，其中有个功能是可以网页上编辑文字和图片，能一起上传到数据库然后在页面上展现，当然还可以上传附件，不过我现在还没弄好，先把上传图片的功能记录一下。
说到这个wangeditor3富文本编辑器，只能说自己才疏学浅被搞得头晕，花了将近三四天才弄好这个简单的上传图片功能= = 主要原因在于还不清楚普通上传图片的具体步骤，直接着手使用富文本编辑器来实现功能，而且这个wangeditor还以轻量级为特点，其文档就没有那么仔细，出现问题的时候我看网上也没有太多的方法可寻，所以在此写下这篇短叙以供自己和网友参考及回忆。话不多说，上代码。

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>

    <form id="newspost" method="post" action="newspost" namespace="/" enctype="multipart/form-data">

    <input type="hidden" id="content" name="content"/>
    <div style="padding: 5px 0; color: #ccc"></div>
    <div id="editor"></div>
    <br>
    <input type="button" value="保存" onclick="subm()"></input>

    </form>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="${pageContext.request.contextPath }/wangEditor.min.js"></script>

    <script type="text/javascript">
        function subm(){

            var title = document.getElementById('title').value;
            document.getElementById('content').value=editor.txt.html();
            document.getElementById('newspost').submit(); 
           }
    </script>
    <script type="text/javascript">
         var E = window.wangEditor
         var editor = new E('#editor')
         editor.customConfig.showLinkImg = false  // 隐藏“网络图片”tab  
         editor.customConfig.uploadFileName = 'yourFileName'      //给上传的本地图片文件命名的统一名称  
         editor.customConfig.uploadImgServer = '/News/picload.action'//官方文档上写的是服务器地址，也就是上传图片的方法名

         editor.customConfig.debug = true
         editor.create() 


    </script>


</body>
</html>

上传图片方法：（参考的方法是wangeditor2文档里的一种）

public void picload() throws Exception{

        HttpServletRequest request = ServletActionContext.getRequest();
        HttpServletResponse response = ServletActionContext.getResponse();

        //创建上传图片存放的文件夹
        String path = request.getServletContext().getRealPath("/image");
        File file = new File(path);
        if (!file.exists())
            file.mkdirs();
        String fileName = "";// 文件名称

        /**上传文件处理内容**/
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload sfu = new ServletFileUpload(factory);
        sfu.setHeaderEncoding("UTF-8"); // 处理中文问题
        sfu.setSizeMax(1024 * 1024); // 限制文件大小
        try {
            List<FileItem> fileItems = sfu.parseRequest(request); // 解码请求
            System.out.println(fileItems);
            for (FileItem fi : fileItems) {
                fileName = UUID.randomUUID()+fi.getName().substring(fi.getName().lastIndexOf("."),fi.getName().length());
                fi.write(new File(path, fileName));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        //获取图片url地址
        System.out.println("fileName:"+fileName);
        String imgUrl = "http://localhost:8080/News/image/" + fileName;
        System.out.println("imgUrl:"+imgUrl);       

        //这里的data数据形式必须如此，返回的url地址才能匹配上wangeditor3的源程序要求
        String data = "{errno: 0,data: ['" + imgUrl + "']}";
        response.setContentType("text/text;charset=utf-8");
        PrintWriter out = response.getWriter();        
        //这里需要用JSONObject转一下String类型的数据，才能保证传回去的数据是json格式的
        JSONObject jsonObject = JSONObject.fromObject(data);       
        out.print(jsonObject.toString());  //返回url地址
        out.flush();
        out.close();

        }

上面的java代码中有个注意的点，就是解码请求List<FileItem> fileItems = sfu.parseRequest(request); 意思是解析表单中的每一个表单项，封装成FileItem对象，以List方式返回。刚开始不知道这里有问题，所以更加头大，多处错误导致本就混乱的我濒临崩溃。debug后发现这个 fileItem 的值为空，于是上网搜索解决方法，有说是表单没配这个属性 enctype=”multipart/form-data” ，但不存在，我一开始用的就是这个。
然后有博客有写到博客地址
这里springMVC 都为我们封装好成自己的文件对象了,转换的过程就在我们所配置的CommonsMultipartResolver这个转换器里面下面再来看看它的源码
这里写图片描述
他的转换器里面就是调用common-fileupload的方式解析,然后再使用parseFileItems()方法封装成自己的文件对象 .

List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);

大家应该发现了上面的这句代码,已经使用过fileUpload解析过request了,你在Controller里面接收到的request都已经是解析过的,你再次使用upload进行解析获取到的肯定是空,这个就是问题的所在(大家可以在servlet里面实验,看看第二次解析后能不能获取到数据,当然是不能的)。
struts2把原始的原来S2为简化上传功能，把所有的enctype=”multipart/form-data”表单做了wrapper最后把HttpServletResquest封装成 org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper
最后解决方案：
重写parse方法，这样就可以自己设置什么操作被struts2过滤处理，什么不被过滤处理。

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest;

public class MyMultiPartRequest extends JakartaMultiPartRequest{  

    @Override  
    public void parse(HttpServletRequest request, String arg1) throws IOException {  
         String url = request.getRequestURI().toString();//取得请求的URL  
         if(url.indexOf("picload.action")>0){//调用的是uploadWebApp.action方法  
             //不需要struts2的处理  
         }else{  
             //需要struts2的处理,调用回父类的方法  
             super.parse(request, arg1);  
         }  
    }  

}

关于最后的json数据转换，还有一点需要提，就是他需要加几个jar包，
组装和解析JSONObject的Json字符串，共需要下面六个包：
1、json-lib
2、commons-beanutils
3、commons-collections
4、commons-lang
5、commons-logging
6、ezmorph
其中commons-lang.jar包需要使用旧一点的版本，2.3,2.4,2.5好像都可以，只要其中有NestableRuntimeException.class就行，不然这个JSONObject jsonObject = JSONObject.fromObject(data); 会不报错也不执行、、（有毒）
这里写图片描述
以下版本是我所使用的，可从网上找资源下载。
commons-lang-2.3.jar
commons-io-2.2.jar
commons-collections-3.2.1.jar
commons-fileupload-1.3.1.jar
commons-logging-1.2.jar
ezmorph-1.0.6.jar

哦还有一点，这个编辑器的123版本给用户使用的变量大部分都不相同，各位网友记得仔细仔细再仔细、、、、、

大概就是这样了，可能还有些问题，各位道友请多指教。
上传附件功能等我弄出来之后再更、

好了，时隔…多日- -，终于搞出来，简单的上传下载附件功能也弄了好久，事情较多，然后没有然后，都是借口哈哈哈哈哈

Cool__Xu

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
8
评论
ssh 使用 wangeditor3 富文本编辑器上传图片方法

这段时间在搞一个小网站的项目，其中有个功能是可以网页上编辑文字和图片，能一起上传到数据库然后在页面上展现，当然还可以上传附件，不过我现在还没弄好，先把上传图片的功能记录一下。说到这个wangeditor3富文本编辑器，只能说自己才疏学浅被搞得头晕，花了将近三四天才弄好这个简单的上传图片功能= = 主要原因在于还不清楚普通上传图片的具体步骤，直接着手使用富文本编辑器来实现功能，而且这个wanged
复制链接

扫一扫