注意：所有文章除特别说明外，转载请注明出处.
1.Ueditor和Spring MVC 的整合
1.config.json
2.集成步骤
1.采用maven的方式来组织构建
在下面的程序中可以看出引入了文件上传以及json的序列化与反序列化处理的依赖包。
<!-- 上传文件的支持 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<!-- org.json -->
<!--JSON is a light-weight, language independent, data interchange format. See http://www.JSON.org/-->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160212</version>
</dependency>
2.资源访问配置
在我们将ueditor静态文件放入webapp目录下之后需要在springmvc.xml配置文件中进行设置排除。
3.引入ueditor的源码
4.添加Controller处理类
该controller处理类原先ueditor中的controller.jsp中的处理代码，改成springmvc的模式，其完成了编辑器初始化工作以及图片/文件的上传处理。
@Controller
@RequestMapping("/ued")
public class UEditorController {
@RequestMapping(value="/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = request.getSession()
.getServletContext().getRealPath("/");
try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
5.配置config.json文件
该配置文件定义了文件/图片的上传接口，以及各种限制(文件的大小上限)。这里将配置文件放在webapp/conf目录下，所以在读取路径配置的时候需要修改。在类ConfigManager中修改为：
private String getConfigPath () {
return this.rootPath
+ File.separator + "conf"
+ File.separator + ConfigManager.configFileName;
}
6.修改ueditor.config.js配置配置文件
在这里需要制定编辑器访问服务器的初始化地址。
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
// 原先默认的
//, serverUrl: URL + "jsp/controller.jsp"
// 修改后的
, serverUrl: "/ued/config"
注意：修改的serverUrl需要指向自己的服务器地址。
ueditor的配置、文件上传
1.ueditor.config.js的配置
window.UEDITOR_HOME_URL = "/项目名/ueditor/";
2.在页面中加载ueditor编辑页面
在<head></head>之间引入三个script。注意：ueditor.config.js 一定要放在ueditor.all.min.js的前面，否则加载不出编辑页面。
3.在<body></body>之间实例化ueditor。注意：type="text/plain"而不是type="text/javascript"。同时在<body></body>中实例化编辑器。
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor('editor');
<script>
4.配置图片上传的路径
修改config.json中的"imagePathFormat": "/×××/upload/image/{yyyy}-{mm}-{dd}/{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */<br>
xxx：表示在www目录下的项目名称，这样配置之后就会在项目名称目录下自动创建一个对应的文件夹upload/image/当前日期/
5.编辑的文章保存数据库
在编辑的文章保存数据库的过程中其实只有HTML程序与相关的文字保存到数据库中。
1.在编辑页面<body></body>中添加程序：
<form action="saveshowController" method="post">
<textarea id="wordtype" name="wordtype" style="display: none"></textarea>
<button id="submit" onclick="getstring();">提交</button>
</form>
<script type="text/javascript">
function getstring(){
document.getElementById('wordtype').innerHTML=UE.getEditor('editor').getContent();
//get.Content() 函数可以获得你所编辑的内容的html代码
}
</script>
注释：表示的是在当前页面中以post的方式将当前页面中表单的内容提交给后台saveshowController中，然后在saveshowController中以相应的方法获取textarea中的数据，然后操作数据库以实现数据包的保存。
