一、前言
時隔兩年後，我再一次在項目中遇見了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、如果，有人知道問題所在，請留言，先謝謝了。