SSM配置Ueditor实现图片的上传

最近想学点新的东西，于是琢磨着用SSM整合Ueditor来实现图片的上传！至于为什么选Ueditor，道理你懂得啦！百度开发的而且开源，能自定义自己想要的内容，版本更新什么的也比较勤快！接下来我准备记录下探索的过程！

1.下载

点击跳转到Ueditor下载界面

你可以到上面的地址下载Ueditor插件，选择UTF-8编码的Jsp版本。

2.构建工程

新建一个Maven工程，首先把ssm框架的基本的东西搭建好，如果你不清楚ssm基本框架，我博客里面有详细的搭建过程可以参考！在这我就直接上图了！

3.初始化编辑器

我在进行这一步的时候遇到了很多问题，希望你仔细看，避免走太多弯路！

下面是我的index.jsp页面的代码，js的引入顺序是有要求的要不然会报错！

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<% String rootPath = request.getContextPath(); %>


    
    
    
    
    
    



完整demo

这里就完成Ueditor的初始化创建了，但是在你的页面中却始终无法出现富文本编辑器的编辑框，这是为什么呢？

是这样的，假如你在web.xml配置的拦截内容如下

  
        SpringMVCDemo  
        /  
  

那么springmvc的前端控制器会对所有的请求进行拦截辨认，静态资源也不例外，所以index.jsp页面是加载不到你需要的那些js文件以及图片等静态资源的！所以你得告诉springmvc，让前端控制器放行静态资源，你得在springmvc.xml中加入如下配置

不出意外的话，现在你已经能在index.jsp页面上看到富文本编辑器了，但是此时的上传图片功能还是无法使用，你还得进行如下的配置！

4.实现图片上传功能

在这我也就不一步一步跟着源码来介绍业务逻辑的实现过程了，如果你希望详细了解的话，去下面这个大牛的博客看看详细实现过程！直接上代码，找到config.json文件

"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://localhost:8080/SpringMVCDemo", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", 
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

修改imageUrlPrefix，把他改成你请求你工程的url！

5.截图

你可以在如下的目录中找到上传的图片：

可是这样真的就够了么？显然，在实际的开发过程中，我们是要将图片的信息存到数据库进行管理的，因此这样的实现远远不够，由于篇幅原因请看下一篇！点击进入SSM配置图片上传<二>