vue.js+UEditor集成

首先，談下這篇文章中的前後端所涉及到的技術框架內容。

雖然是後端的管理項目，但整體項目，是採用前後端分離的方式完成，這樣做的目的也是產品化的需求；

前端，vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建，其中用到了superUI來作為後端登陸之後的主頁面框架，中間集成vue的大型單頁應用；

後端，springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo

+zookeeper的方式來構建項目框架和管理，提供給前端restful風格的介面。此處還提供app端、PC WEB端的介面。

UEditor之前一直有在項目中使用，作為國內開源的富文本編輯器，有百度的強大技術支持，整體來說是不錯的選擇，百度也提供了php、asp、.net、jsp的版本。原有的項目是採用整體式的開發方式，採用的是jsp的頁面開發技術，所以集成起來相對來說更加容易，只需要按照文檔的方式將前端集成進去，然後後端拿到源碼之後，針對文件上傳的類修改最終存儲的方法即可將文件等上傳到本身的伺服器了。

然而，由於決定了做前後端分離的方式，必然就會有新的坑，特別是還選擇了新的技術vue.js+elementUI的這種方式。那麼也只能放手一搏，不多啰嗦，介紹完，馬上開始正事。

1、下載UEditor官網最新的jsp版本的包，下載完成解壓之後得到一個ueditor1_4_3_3-utf8-jsp的文件夾，裡面包含的內容如下：

除了jsp的文件夾之外，其餘的文件和文件夾複製到前端項目中的static用於存放靜態文件的目錄下，結構如下：

這裡特別說明jsp目錄下的資源為何不放進來，因為我們是vue搭建的項目，jsp頁面肯定是不會放在前端的項目中的，包括config.json也放在後端用於解析，這裡後面會解釋這樣做的原因。

2、前端將文件放進來之後，暫時先這樣，咱們來整理後端的東西。這裡將jsp目錄下的lib目中的ueditor.jar文件中的所有類全部拿出來（具體方式自己決定，反編譯工具或者拿到源碼都可以）,放到後端項目中，然後在control層新建一個UeditorController.java的類，如下：

1 /**
2 * 用於處理關於ueditor插件相關的請求
3 * @author Guoqing
4 *
5 */
6 @RestController
7 @CrossOrigin
8 @RequestMapping("/sys/ueditor")
9 public class UeditorController extends BaseController {
10
11 @RequestMapping(value = "/exec")
12 @ResponseBody
13 public String exec(HttpServletRequest request) throws UnsupportedEncodingException{
14 request.setCharacterEncoding("utf-8");
15 String rootPath = request.getRealPath("/");
16 return new ActionEnter( request, rootPath).exec;
17 }
18 }

然後jsp目錄下的config.json文件放到java/main/resources目錄下，修改ConfigManager.java類，如下：

注釋掉原有的讀取配置文件的方式，添加新的讀取路徑，這樣確保ueditor在初始化能夠正確的載入配置文件。此時，修改前端項目中ueditor.config.js中的serverUrl的值為:

// 伺服器統一請求介面路徑
, serverUrl: "http://localhost:8080/sys/ueditor/exec"

而，針對ActionEnter.java類中，如下代碼後的文件上傳的處理，請大家針對自身的上傳方式和文件伺服器選擇適合自己的方式：

switch ( actionCode ) {
//讀取配置文件時的請求處理
case ActionMap.CONFIG:
return this.configManager.getAllConfig.toString;
//上傳圖片、視頻、文件時的處理
case ActionMap.UPLOAD_IMAGE:
case ActionMap.UPLOAD_SCRAWL:
case ActionMap.UPLOAD_VIDEO:
case ActionMap.UPLOAD_FILE:
conf = this.configManager.getConfig( actionCode );
state = new Uploader( request, conf, baseFileService ).doExec;
break;
//抓取遠程圖片時的處理方式，此處也可以關閉

//當從網頁上複製內容到編輯器中，如果圖片與該域名不同源，則會自動抓到本地的伺服器保存
case ActionMap.CATCH_IMAGE:
conf = configManager.getConfig( actionCode );
String list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
state = new ImageHunter( conf ).capture( list );
break;
//上傳多文件時的文件在線管理
case ActionMap.LIST_IMAGE:
case ActionMap.LIST_FILE:
conf = configManager.getConfig( actionCode );
int start = this.getStartIndex;
state = new FileManager( conf ).listFile( start );
break;

}
return state.toJSONString;

最終的一步，寫vue頁面，插入ueditor組件，直接貼上源代碼如下：

至此，大功告成，包括文件上傳下載等部分全部搞定，不過要聲明一點的是，當出現介面與頁面部署域名不同時，點擊選擇圖片上傳會出現iframe跨域的問題。

好了，如果以上對你有幫助的話，請順手點個贊，謝謝各位大蝦們啦！

效果圖如下：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！