标签：XML term 压缩 ref ppi ring file 接下来 -name
最近想学点新的东西，于是琢磨着用SSM整合Ueditor来实现图片的上传！至于为什么选Ueditor，道理你懂得啦！百度开发的而且开源，能自定义自己想要的内容，版本更新什么的也比较勤快！接下来我准备记录下探索的过程！
1.下载
你可以到上面的地址下载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="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<style type="text/css">
div{
width:100%;
}
</style>
<body>
<h1>完整demo</h1>
<script type="text/plain" id="myEditor">
</script>
<script type="text/javascript">
var ue = UE.getEditor(‘myEditor‘);
</script>
</body>
</html>这里就完成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.截图
你可以在如下的目录中找到上传的图片：
可是这样真的就够了么？显然，在实际的开发过程中，我们是要将图片的信息存到数据库进行管理的，因此这样的实现远远不够，由于篇幅原因请看下一篇！
标签：XML term 压缩 ref ppi ring file 接下来 -name
原文地址：http://blog.csdn.net/qq_34292044/article/details/72008847
