以下以FreeMarker为例，Velocity同理
1.官网：http://ueditor.baidu.com
下载：http://ueditor.baidu.com/website/download.html
下载jsp版本及源码版本（使用源码版本需要用grunt编译）
这里下源码版本的目的主要是为了获得 jsp/src/com/baidu/ueditor中的代码，可以根据自己需要修改代码。
2.导入必要jar包：
<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.9</version>
</dependency>
<dependency>
<groupId>com.baidu</groupId>
<artifactId>ueditor-json</artifactId>
<version>1.0.0</version>
</dependency>
3.拷贝代码：
把jsp/src/com/baidu/ueditor中源代码拷贝到工程中。
把ueditor目录拷贝到工程中webapp中，本例中拷贝到了webapp/media目录下。
4.页面中引入UEditor相关脚本：
<script type="text/javascript" charset="utf-8" src="../../../media/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../../media/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="../../../media/ueditor/lang/zh-cn/zh-cn.js"></script>
用编辑器的位置加入
<div style="margin-left: 100px;">
<script id="editor" type="text/plain" style="width:800px;height:600px;"></script>
</div>
5.这里是重点！！！有2种方案可选择：
第一种方案：这种方案简单一点，由于现有工程的视图解析器只有FreeMarker，并不能直接使用jsp版本的UEditor，需要加入jsp解析器配置，以便UEditor调用jsp中代码，
<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
<property name="viewResolvers">
<list>
<!-- 配置freeMarker视图解析器 -->
<bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
<property name="cache" value="true" />
<property name="prefix" value="" />
<property name="suffix" value=".html" />
<property name="contentType" value="text/html;charset=UTF-8" />
<property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView" />
<property name="allowSessionOverride" value="true" />
<property name="allowRequestOverride" value="true" />
<property name="exposeSpringMacroHelpers" value="false" />
<property name="exposeRequestAttributes" value="true" />
<property name="exposeSessionAttributes" value="true" />
<property name="requestContextAttribute" value="request" />
</bean>
<!-- jsp 视图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</list>
</property>
</bean>
第二种方案，不配置jsp视图解析器，请求返回时走jsp的视图解析器。
这种方案需要自定义接口“骗过”UEditor，修改UEditor请求的路径，请求自定义的接口。
a.通过看UEditor的js代码可以发现 ueditor.config.js文件配置的请求路径是serverUrl: URL + "jsp/controller.jsp" ，这里要改为自己接口的地址：serverUrl: URL + "jsp/upfile"。（注：这里路径前半段的jsp/不要修改，在UEditor的java代码中会根据这个路径查找config.js文件。如果非要改，就把jsp/config.json换个目录比如conf目录，这样就可以把接口地址改为serverUrl: URL + "conf/upfile"）
b.仿照jsp/controller.jsp写接口
jsp:
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String rootPath = application.getRealPath( "/" );
out.write( new ActionEnter( request, rootPath ).exec() );
%>
接口: （一定要支持POST和GET，页面加载时会通过GET请求加载配置。）
@RequestMapping(value = "/media/ueditor/jsp/upfile", method = { RequestMethod.GET, RequestMethod.POST })
@ResponseBody
public String check(HttpServletRequest request) throws IOException {
String rootPath = request.getSession().getServletContext().getRealPath("/");
String exec = new ActionEnter(request, rootPath).exec();
return exec;
}
c.改造com.baidu.ueditor.upload.BinaryUploader类，处理MultipartFile
原：
FileItemIterator iterator = upload.getItemIterator(request);
while (iterator.hasNext()) {
fileStream = iterator.next();
if (!fileStream.isFormField())
break;
fileStream = null;
}
if (fileStream == null) {
return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
}
String savePath = (String) conf.get("savePath");
String originFileName = fileStream.getName();
现：
MultipartHttpServletRequest mulReq = (MultipartHttpServletRequest) request;
MultipartFile file = mulReq.getFile("upfile");
String savePath = (String) conf.get("savePath");
String originFileName = file.getOriginalFilename();
6.目前工程是分布式部署，管理后台和提供前台工程查询接口的工程分别部署在不同服务器上，UEditor默认会把图片存储在管理后台的服务器上，需要再次对BinaryUploader进行改造，每次上传到共享文件服务器上，将图片的imageUrl存到State对象中，
storageState.putInfo("url", PathFormat.format(imageUrl));
附：UEditor相关API参照以下js
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
function isFocus(e){
alert(UE.getEditor('editor').isFocus());
UE.dom.domUtils.preventDefault(e)
}
function setblur(e){
UE.getEditor('editor').blur();
UE.dom.domUtils.preventDefault(e)
}
function insertHtml() {
var value = prompt('插入html代码', '');
UE.getEditor('editor').execCommand('insertHtml', value)
}
function createEditor() {
enableBtn();
UE.getEditor('editor');
}
function getAllHtml() {
alert(UE.getEditor('editor').getAllHtml())
}
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为：");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}
function getPlainTxt() {
var arr = [];
arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
arr.push("内容为：");
arr.push(UE.getEditor('editor').getPlainTxt());
alert(arr.join('\n'))
}
function setContent(isAppendTo) {
var arr = [];
arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
alert(arr.join("\n"));
}
function setDisabled() {
UE.getEditor('editor').setDisabled('fullscreen');
disableBtn("enable");
}
function setEnabled() {
UE.getEditor('editor').setEnabled();
enableBtn();
}
function getText() {
//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var txt = UE.getEditor('editor').selection.getText();
alert(txt)
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
arr.push("编辑器的纯文本内容为：");
arr.push(UE.getEditor('editor').getContentTxt());
alert(arr.join("\n"));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
arr.push("判断结果为：");
arr.push(UE.getEditor('editor').hasContents());
alert(arr.join("\n"));
}
function setFocus() {
UE.getEditor('editor').focus();
}
function deleteEditor() {
disableBtn();
UE.getEditor('editor').destroy();
}
function disableBtn(str) {
var div = document.getElementById('btns');
var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
if (btn.id == str) {
UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
} else {
btn.setAttribute("disabled", "true");
}
}
}
function enableBtn() {
var div = document.getElementById('btns');
var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
}
}
function getLocalData () {
alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
}
function clearLocalData () {
UE.getEditor('editor').execCommand( "clearlocaldata" );
alert("已清空草稿箱")
}
</script>
