項(xiàng)目中需要使用到富文本編輯器唯欣，找來找去發(fā)現(xiàn)百度UEditor富文本編輯器在國內(nèi)最為常用因此就嘗試引入混萝。編輯器官網(wǎng)是：http://ueditor.baidu.com/website/index.html 遗遵， 開發(fā)文檔和js包可以從這里找到。
下面開始介紹開發(fā)過程：
-
引入富文本編輯器UEditor
編輯器js文件引入的靜態(tài)目錄
將所有下載好的js包（官方有jsp逸嘀、php等幾個(gè)版本的包车要，我下載的是jsp的）放入resources目錄下的static下，我在里面建立了個(gè)js目錄崭倘，下面又搞了個(gè)ueditor包用于存放所有編輯器js翼岁。
頁面中引入編輯器
<div class="form-group">
<label for="title" class="col-md-2 control-label">新聞詳情</label>
<div class="col-md-10" style="width: 100%;">
<script id="editor" name="detailContent" type="text/plain" style="width:100;height:500px;"></script>
</div>
</div>
引入相關(guān)js文件：
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.all.min.js"> </script>
<!--建議手動加在語言，避免在ie下有時(shí)因?yàn)榧虞d語言失敗導(dǎo)致編輯器加載失敗-->
<!--這里加載的語言文件會覆蓋你在配置項(xiàng)目里添加的語言類型司光，比如你在配置項(xiàng)目里配置的是英文琅坡，這里加載的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.js"></script>
其中/js/ueditor/ueditor.js是我根據(jù)官方demo中封裝的一些方法残家，方便使用而已榆俺，可有可無。
測試打開頁面應(yīng)該已經(jīng)有了編輯器展示了。
- 編輯器配置文件修改
為了后續(xù)可以上傳等與后臺交互的操作茴晋，需要修改下統(tǒng)一配置文件陪捷，就是剛引入的ueditor.config.js,
我這里主要改動了兩個(gè)地方：
a. 服務(wù)器地址
b. 工具項(xiàng)配置
如下：
window.UEDITOR_CONFIG = {
//為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋
UEDITOR_HOME_URL: URL
// 服務(wù)器統(tǒng)一請求接口路徑
// , serverUrl: URL + "jsp/controller.jsp"
, serverUrl: "http://localhost:8081/admin/imgUpload2"
//工具欄上的所有的功能按鈕和下拉框诺擅，可以在new編輯器的實(shí)例時(shí)選擇自己需要的重新定義
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'insertvideo', 'music', 'attachment', 'map', '|',
'horizontal', 'date', 'time', '|',
'print', 'preview', 'searchreplace'
]]
其中serverUrl是服務(wù)器地址市袖，這個(gè)地址要是錯(cuò)誤，會使得本地圖片上傳的地方無法使用烁涌。而該方法返回的是一組JSON格式的配置苍碟。我參照著原來jsp例子中的結(jié)果直接返了個(gè)JSON：
@RequestMapping(value = "/imgUpload2")
@ResponseBody
public String imgUpload(HttpServletRequest request) {
String config = "{\n" +
"videoMaxSize: 102400000,\n" +
"videoActionName: \"uploadvideo\",\n" +
"fileActionName: \"uploadfile\",\n" +
"fileManagerListPath: \"/ueditor/jsp/upload/file/\",\n" +
"imageCompressBorder: 1600,\n" +
"imageManagerAllowFiles: [\n" +
"\".png\",\n" +
"\".jpg\",\n" +
"\".jpeg\",\n" +
"\".gif\",\n" +
"\".bmp\"\n" +
"],\n" +
"imageManagerListPath: \"/ueditor/jsp/upload/image/\",\n" +
"fileMaxSize: 51200000,\n" +
"fileManagerAllowFiles: [\n" +
"\".png\",\n" +
...
...
json具體參見引入的jsp包下的config.json,原樣返回即可。
有了這個(gè)接口撮执，當(dāng)我們點(diǎn)擊本地圖片上傳控件時(shí)微峰，應(yīng)該就可以彈出文件選擇器，選擇本地圖片了二打。但是此時(shí)選好圖片后县忌，文件實(shí)際是上傳不了的，因?yàn)槲覀冞€得重新寫一個(gè)我們自己的圖片上傳接口继效。
- 圖片上傳接口及設(shè)置
圖片上傳接口代碼：
@RequestMapping(value = "/imgUpload3")
@ResponseBody
public String imgUpload3(MultipartFile upfile) {
String path = this.imgUpload(upfile).getData();
String config =
"{\n" +
" \"state\": \"SUCCESS\",\n" +
" \"url\": \"http://localhost:8081/upload/"+path+"\",\n" +
" \"title\": \"path\",\n" +
" \"original\": \"path\"\n" +
" }";
return config;
}
其中this.imgUpload(upfile).getData()這個(gè)方法是之前寫的springboot進(jìn)行文件上傳的接口症杏，見：http://www.reibang.com/p/a839637710f9 ， getData方法返回了圖片的路徑瑞信，
而這個(gè)接口中返回的json格式是官方api中規(guī)定的厉颤，見官方文檔：http://fex.baidu.com/ueditor/#dev-request_specification 。
好了本地圖片上傳的接口已經(jīng)寫好了凡简，最后就是設(shè)置一下編輯器的上傳圖片請求路徑逼友。
在前端頁面中加入：
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://localhost:8081/admin/imgUpload3';
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
好了，現(xiàn)在應(yīng)該可以在編輯器中進(jìn)行完整的圖片上傳了操作了秤涩。
