首页 > 代码库 > SSM配置Ueditor实现图片的上传<一>

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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<% String rootPath = request.getContextPath(); %>
<head>
<title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"ueditor/ueditor.config.js"></script>>这里就完成Ueditor的初始化创建了,但是在你的页面中却始终无法出现富文本编辑器的编辑框,这是为什么呢?

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

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

<!--静态资源拦截问题  -->
    <mvc:resources location="/ueditor/" mapping="/ueditor/**"/>
不出意外的话,现在你已经能在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配置Ueditor实现图片的上传<一>