一、前言
时隔两年后，我再一次在项目中遇见了UEditor（不得不用，囧，对于初学者，UE真不好用）。
在讲解它两如何结合，实现富文本编辑效果之前，我先针对几个坑重点说清一下，防止更多地人不知道。
- 初始化UE编辑器之前，UE需要请求
serverUrl: URL + "jsp/controller.jsp"，来完成加载config.json文件配置，这个保持原始文本就行，完全不用自己重新实现ueditor.jar中的类。 - 用UE想要向后台传输文件、图片，不需要用UE提供默认方式；自己重写UE编辑器上传路径，针对图片、视频、音频、文件。
- 网上有人说UE向struts2发送请求，struts2包装了request，action无法获得上传的file(文件)流，实际情况并不是。
注意：ueditor-1.1.2.jar，一定要放在你WEB项目依赖的lib包下（或maven项目要添加这个依赖）；因为，controller.jsp要请求这个jar包下的ActionEnter、ConfigManager类，去加载config.json文件内容。
二、答疑解惑
针对以上3中情况，我这里一一解答。
这是我ueditor.js目录结构：
ue.js内容：
/**
* 注意：现在的公共ue在config.json已经配置了不压缩图片"false"和分辨率最大是"1920"。
* 如果想用setOpt方法设置那2个属性，单张图片上传是可以生效的；但是，多张批量无效。
* Created by yanfei on 2016/7/12.
*/
/**
* 以下是重写UE编辑器图片上传路径，若要增加视频、附件等上传路径，请查询UE编辑器官方对应的action值
* @type {UE.Editor.getActionUrl|*}
* @private
* @author: yanfei
* @date: 2016.7.13
*/
// 以下为ue默认的请求action名称，可以在config.json里修改
var UPLOADIMAGE = 'uploadimage';
var UPLOADFILE = 'uploadfile';
var UPLOADVIDEO = 'uploadvideo';
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == UPLOADIMAGE || action == UPLOADFILE) {
// alert(uploadUrl);
// alert(baseUrl);
return baseUrl + '/***/uploadImages.do';
}else if(action == UPLOADVIDEO){
return uploadUrl +'/***/uploadVideo.do';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
var ue;
/**
* 初始化UE编辑器
* @param id
* @param text
* @author: yanfei
* @date: 2016.7.13
*/
function initUE(id, text){
ue = UE.getEditor(id,{
// 自定义工具栏
toolbars: [
[
'bold', //加粗
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'touppercase', //字母大写
'tolowercase', //字母小写
'simpleupload', //单图上传
'insertimage', //多图上传
'insertvideo', //视频
'attachment', //附件
'selectall', //全选
'preview', //预览
'fullscreen' //全屏
],
[
'inserttable', //插入表格
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
// 'insertcode', //代码语言
'lineheight', //行间距
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'edittable', //表格属性
'edittd' //单元格属性
],
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'indent', //首行缩进
// 'snapscreen', //截图
'source', //源代码
// 'blockquote', //引用
'pasteplain', //纯文本粘贴模式
// 'print', //打印
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
// 'map', //Baidu地图
// 'gmap', //Google地图
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'imagecenter', //居中
'wordimage', //图片转存
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
// 'webapp', //百度应用
'background', //背景
'template', //模板
// 'scrawl', //涂鸦
// 'music', //音乐
// 'drafts', // 从草稿箱加载
// 'charts', // 图表
'help' //帮助
]
/*
* 注意：每个方括号的最后一个属性一定要去掉逗号
*/
]
});
ue.ready(function(){
//this是当前创建的编辑器实例
this.setContent(text);
});
// 防止div变成p
ue.setOpt({
'allowDivTransToP':false
});
}
第一个疑问、第二个疑问，解答如下：
1、依赖ueditor.jar。
2、编写ue.js。
3、引用js、css样式。
<!-- 配置文件 -->
<script type="text/javascript" src="<c:url value="/commons/UEditor/ueditor.config.js"></c:url>"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<c:url value="/commons/UEditor/ueditor.all.js"></c:url>"></script>
<script type="text/javascript" src="<c:url value="/commons/UEditor/ue.js"></c:url>"></script>
<script type="text/javascript" src="<c:url value="/commons/UEditor/third-party/video-js/video.js"></c:url>"></script>
<link type="text/css" rel="stylesheet" src="<c:url value="/commons/UEditor/third-party/video-js/video-js.css"></c:url>" />
4、编写js代码，实例化ue。
<script type="text/javascript">
var uploadUrl = "${pageContext.request.scheme}" + "://"
+ "${pageContext.request.serverName}" + ":"
+ "${pageContext.request.serverPort}"
+ "${pageContext.request.contextPath}";
$(document).ready(function () {
// 初始化UE编辑器
initUE('description', '');
ue.ready(function(){
//this是当前创建的编辑器实例
this.setContent($("#temp").val());
});
});
</script>
5、指明富文本编辑器。
<script id="description" name="description" type="text/plain" style="width: 100%; height: 400;"></script>
6、就这样，前端代码就写完了。如果，你是spring mvc项目，就可以利用MultipartFile类型接受file（文件），请求如下：
这是controller.jsp正确加载文件的请求：
上传图片的请求：
第三个疑问：这个我已经验证过了，完全没有问题，不需要增加任何的代码，就可以让ue与struts2完美结合。
注意：最后一点，要在ueditor.config.js中的"xss过滤白名单"那里，追加以下代码，才能正常显示视频资源。
// 保证视频显示正常，增加以下白名单
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
三、遗留问题
1、视频上传成功后，富文本编辑器里的视频资源，无法预览，只会有视频播放小图标；但是，在页面加载时，视频可以正常播放。
2、经过上步1的操作，不能对已上传的视频资源，进行样式修改；一修改，视频url地址会被清空。可以正常修改"图片"资源样式。暂时不知道为什么，也不知道是不是ue的bug，还是我的问题。
3、如果，有人知道问题所在，请留言，先谢谢了。