UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...
这里主要是实现UEditor上传图片到项目之外(例如：资源服务器等)，将图片路径返回，下面是主要修改的代码。
ueditor.jsp
注意红色部分
<%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ueditor测试页面</title>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/plugins/ueditor/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<span style="color: red;">
注：该页面实现富文本编辑器的功能，其中上传图片部分通过调用后台方法，先上传图片到别处(项目外或者资源服务器)，再返回到
</span>
<div class="f_l" style="margin:35px 0 0 0">
<span class="th"><span style="color:red;">*</span>内容:</span>
<span style="display:block;margin:-16px 0 0 62px">
<script id="editor" type="text/plain" style="width:740px;height:200px;"></script>
</span>
</div>
<div data-options="region:'south',border:false" style="text-align:center;padding:10px 0 0;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="#" style="width:80px" οnclick="save()">提交</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" οnclick="close()" style="width:80px">关闭</a>
</div>
<script type="text/javascript">
function save(){
var arr = [];
arr.push(UE.getEditor('editor').getContent());
var content = arr.join("\n");
if (content == null || content == '') {
alert("内容不能为空");
return;
}
alert(content)
}
var ctx = "${pageContext.request.contextPath}";
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
UE.Editor.prototype.getActionUrl=function(action){
if ((action == 'uploadimage')){
return ctx+'/do/infoManageControl/ueditorUploadImage'; /* 这里填上你自己的上传图片的action */
}else if (action == 'uploadvideo'){
return ctx+'/do/infoManageControl/ueditorUploadVideo'; /* 这里填上你自己的上传视频的action */
}else{
return this._bkGetActionUrl.call(this, action);
}
};
</script>
</body>
</html>上传图片的Action
UeditorControl.java
注：
String url = UploadAction.uploadSFTP(req, file);该方法就是实现上传图片到资源服务器，并返回该图片在资源服务器url，这里就不贴代码了。
package com.cn.control.ueditor;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
/** * @author feifz:
* @date ：2017年10月19日 下午4:24:17
* @return
* @desc
*/
@Controller
public class UeditorControl {
private static final Logger log = LoggerFactory.getLogger(UeditorControl.class);
@RequestMapping("/ueditorUploadImage")
@ResponseBody
public Map<String,Object> save(HttpServletRequest req){
Map<String,Object> rs = new HashMap<String, Object>();
MultipartHttpServletRequest mReq = null;
MultipartFile file = null;
String fileName = "";
// 原始文件名 UEDITOR创建页面元素时的alt和title属性
String originalFileName = "";
try {
mReq = (MultipartHttpServletRequest)req;
// 从config.json中取得上传文件的ID
file = mReq.getFile("upfile");
// 取得文件的原始文件名称
fileName = file.getOriginalFilename();
originalFileName = fileName;
/*你的处理图片的代码*/
//上传图片，返回全路径
String url = UploadAction.uploadSFTP(req, file);
rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
rs.put("url",url); //能访问到你现在图片的路径
// rs.put("url", "https://img-blog.csdn.net/20161116200623502");
rs.put("title", originalFileName);
rs.put("original", originalFileName);
} catch (Exception e) {
log.error(e.getMessage(),e);
rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
rs.put("url","");
rs.put("title", "");
rs.put("original", "");
}
return rs;
}
}
效果图：
html模式：
注意：由于修改了UEditor源生的上传图片的方法，我们在使用的时候会发现，当富文本编辑器里有我们上传的图片时，在下面选择从别的地方粘贴一段文字过来是，上面的代码就会消失。
原因：ueditor在粘贴内容的时候会将目前编辑的所有内容中元素重新赋值非本地服务器链接的属性
解决办法：(亲测可用)：在ueditor.config.js文件中添加如下代码即可：catchRemoteImageEnable: false
2017.12.1修改：
以上主要是讲得上传图片到资源服务器，发现在上传视频到资源服务器时，稍微有一点不一样
上传的方式，配置等跟上传图片差不多，只不过ActionName是uploadvideo，上传之后返回的json信息什么的要求跟上传图片差不多，以前只是随意从别人那copy过来，以为只要返回成功就行了，在参考别的博文时发现也是有讲究的。
下面介绍一下返回给UEditor的参数
这里你应该参考http://fex.baidu.com/ueditor/#dev-request_specification
官方文档里面的 后端请求参数-请求规范，
官方有介绍了，返回参数的格式，格式中json的key就是对应了类ReturnUploadImage里面的属性。
转换后格式应该是这样的，要严格按照文档上面的格式
{"original":"5dfcfea3e3b442bda3972053266c3bd3.jpg","state":"SUCCESS","title":"5dfcfea3e3b442bda3972053266c3bd3.jpg","url":"http://www.xxxxx321.com/mmmm/xxxModuleName/20150922/5dfcfea3e3b442bda3972053266c3bd3.jpg"}
注：不同的文件上传，返回的属性不一样
=======================ReturnUploadImageStart============================================
public classReturnUploadImage {
private String state;//上传状态SUCCESS 一定要大写
private String url;//上传地址
private String title;//图片名称demo.jpg
private String original;//图片名称demo.jpg
....getter & setter...
}
=======================ReturnUploadImage End==============================================
这里官方文档也说的很清楚，对应 config、uploadimage、uploadscrawl、uploadvideo、uploadfile....都有各自的格式
在上传完视频之后，查看富文本对应的html代码会发现上传的视频url丢失了，究其原因，通过查阅网络上资料发现有两种解释：
1.ueditor.config.js文件大概368行的位置，whitList这个白名单属性名字写错了，改为whiteList就可以了，本人亲测，确实是可以(ueditor用的版本是1.4.3.3)。
2.
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
