溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
首先，談下這篇文章中的前后端所涉及到的技術框架內容。
雖然是后端的管理項目，但整體項目，是采用前后端分離的方式完成，這樣做的目的也是產品化的需求；
前端，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的文件夾，里面包含的內容如下：
![詳解vue.js+UEditor集成 [前后端分離項目]](https://cache.yisu.com/upload/information/20200622/114/72640.png)
除了jsp的文件夾之外，其余的文件和文件夾復制到前端項目中的static用于存放靜態文件的目錄下，結構如下：
![詳解vue.js+UEditor集成 [前后端分離項目]](https://cache.yisu.com/upload/information/20200622/114/72641.png)
這里特別說明jsp目錄下的資源為何不放進來，因為我們是vue搭建的項目，jsp頁面肯定是不會放在前端的項目中的，包括config.json也放在后端用于解析，這里后面會解釋這樣做的原因。
2、前端將文件放進來之后，暫時先這樣，咱們來整理后端的東西。這里將jsp目錄下的lib目中的ueditor.jar文件中的所有類全部拿出來（具體方式自己決定，反編譯工具或者拿到源碼都可以）,放到后端項目中，然后在control層新建一個UeditorController.java的類，如下：
/**
* 用于處理關于ueditor插件相關的請求
* @author Guoqing
*
*/
@RestController
@CrossOrigin
@RequestMapping("/sys/ueditor")
public class UeditorController extends BaseController {
@RequestMapping(value = "/exec")
@ResponseBody
public String exec(HttpServletRequest request) throws UnsupportedEncodingException{
request.setCharacterEncoding("utf-8");
String rootPath = request.getRealPath("/");
return new ActionEnter( request, rootPath).exec();
}
}
然后jsp目錄下的config.json文件放到java/main/resources目錄下，修改ConfigManager.java類，如下：
![詳解vue.js+UEditor集成 [前后端分離項目]](https://cache.yisu.com/upload/information/20200622/114/72642.png)
注釋掉原有的讀取配置文件的方式，添加新的讀取路徑，這樣確保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組件，直接貼上源代碼如下：
<template>
<div>
<el-row :gutter="20">
<el-col :span="24" class="toolbar">
<h2>完整demo</h2>
<div id="editor" type="text/plain" ></div>
</el-col>
</el-row>
</div>
</template>
<script>
import AppConfig from '@/config'
import '../../../../static/ueditor/ueditor.config.js'
import '../../../../static/ueditor/ueditor.all.js'
import '../../../../static/ueditor/lang/zh-cn/zh-cn.js'
export default {
name: "ueditor",
data() {
return {
id: Math.random().toString(16).substring(2) + 'ueditorId',
editor: null,
msg: 'Welcome to ueditor'
};
},
mounted() {
this.ue = UE.getEditor('editor',{
//此處可以定制工具欄的功能，若不設置，則默認是全部的功能
toolbars: [
[
'anchor', //錨點
'undo', //撤銷
'redo', //重做
'bold', //加粗
'indent', //首行縮進
'snapscreen', //截圖
'italic', //斜體
'underline', //下劃線
'strikethrough', //刪除線
'subscript', //下標
'fontborder', //字符邊框
'superscript', //上標
'formatmatch', //格式刷
'source', //源代碼
'blockquote', //引用
'pasteplain', //純文本粘貼模式
'selectall', //全選
'print', //打印
'preview', //預覽
'horizontal', //分隔線
'removeformat', //清除格式
'time', //時間
'date', //日期
'unlink', //取消鏈接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并單元格
'mergedown', //下合并單元格
'deleterow', //刪除行
'deletecol', //刪除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分單元格
'deletecaption', //刪除表格標題
'inserttitle', //插入標題
'mergecells', //合并多個單元格
'deletetable', //刪除表格
'cleardoc', //清空文檔
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代碼語言
'fontfamily', //字體
'fontsize', //字號
'paragraph', //段落格式
'insertimage', //多圖上傳
'edittable', //表格屬性
'edittd', //單元格屬性
'link', //超鏈接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查詢替換
'map', //Baidu地圖
'gmap', //Google地圖
'insertvideo', //視頻
'help', //幫助
'justifyleft', //居左對齊
'justifyright', //居右對齊
'justifycenter', //居中對齊
'justifyjustify', //兩端對齊
'forecolor', //字體顏色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //無序列表
'fullscreen', //全屏
'directionalityltr', //從左向右輸入
'directionalityrtl', //從右向左輸入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分頁
'insertframe', //插入Iframe
'imagenone', //默認
'imageleft', //左浮動
'imageright', //右浮動
'attachment', //附件
'imagecenter', //居中
'wordimage', //圖片轉存
'lineheight', //行間距
'edittip ', //編輯提示
'customstyle', //自定義標題
'autotypeset', //自動排版
'webapp', //百度應用
'touppercase', //字母大寫
'tolowercase', //字母小寫
'background', //背景
'template', //模板
'scrawl', //涂鴉
'music', //音樂
'inserttable', //插入表格
'drafts', // 從草稿箱加載
'charts', // 圖表
]
],
BaseUrl: '',
UEDITOR_HOME_URL: 'static/ueditor/'
});
},
destoryed() {
this.editor.destory();
},
methods:{
getUeditorContent: function(){
console.log(this.editor.getContent());
}
}
}
</script>
至此，大功告成，包括文件上傳下載等部分全部搞定，不過要聲明一點的是，當出現接口與頁面部署域名不同時，點擊選擇圖片上傳會出現iframe跨域的問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
