詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]
首先,談下這篇文章中的前后端所涉及到的技術(shù)框架內(nèi)容。
雖然是后端的管理項(xiàng)目,但整體項(xiàng)目,是采用前后端分離的方式完成,這樣做的目的也是產(chǎn)品化的需求;
前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI來(lái)作為后端登陸之后的主頁(yè)面框架,中間集成vue的大型單頁(yè)應(yīng)用;
后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo
+zookeeper的方式來(lái)構(gòu)建項(xiàng)目框架和管理,提供給前端restful風(fēng)格的接口。此處還提供app端、PC WEB端的接口。
UEditor之前一直有在項(xiàng)目中使用,作為國(guó)內(nèi)開(kāi)源的富文本編輯器,有百度的強(qiáng)大技術(shù)支持,整體來(lái)說(shuō)是不錯(cuò)的選擇,百度也提供了php、asp、.net、jsp的版本。原有的項(xiàng)目是采用整體式的開(kāi)發(fā)方式,采用的是jsp的頁(yè)面開(kāi)發(fā)技術(shù),所以集成起來(lái)相對(duì)來(lái)說(shuō)更加容易,只需要按照文檔的方式將前端集成進(jìn)去,然后后端拿到源碼之后,針對(duì)文件上傳的類(lèi)修改最終存儲(chǔ)的方法即可將文件等上傳到本身的服務(wù)器了。
然而,由于決定了做前后端分離的方式,必然就會(huì)有新的坑,特別是還選擇了新的技術(shù)vue.js+elementUI的這種方式。那么也只能放手一搏,不多啰嗦,介紹完,馬上開(kāi)始正事。
1、下載UEditor官網(wǎng)最新的jsp版本的包,下載完成解壓之后得到一個(gè)ueditor1_4_3_3-utf8-jsp的文件夾,里面包含的內(nèi)容如下:
除了jsp的文件夾之外,其余的文件和文件夾復(fù)制到前端項(xiàng)目中的static用于存放靜態(tài)文件的目錄下,結(jié)構(gòu)如下:

這里特別說(shuō)明jsp目錄下的資源為何不放進(jìn)來(lái),因?yàn)槲覀兪莢ue搭建的項(xiàng)目,jsp頁(yè)面肯定是不會(huì)放在前端的項(xiàng)目中的,包括config.json也放在后端用于解析,這里后面會(huì)解釋這樣做的原因。
2、前端將文件放進(jìn)來(lái)之后,暫時(shí)先這樣,咱們來(lái)整理后端的東西。這里將jsp目錄下的lib目中的ueditor.jar文件中的所有類(lèi)全部拿出來(lái)(具體方式自己決定,反編譯工具或者拿到源碼都可以),放到后端項(xiàng)目中,然后在control層新建一個(gè)UeditorController.java的類(lèi),如下:
/**
* 用于處理關(guān)于ueditor插件相關(guān)的請(qǐng)求
* @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文件放到j(luò)ava/main/resources目錄下,修改ConfigManager.java類(lèi),如下:

注釋掉原有的讀取配置文件的方式,添加新的讀取路徑,這樣確保ueditor在初始化能夠正確的加載配置文件。此時(shí),修改前端項(xiàng)目中ueditor.config.js中的serverUrl的值為:
// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑 , serverUrl: http://localhost:8080/sys/ueditor/exec
而,針對(duì)ActionEnter.java類(lèi)中,如下代碼后的文件上傳的處理,請(qǐng)大家針對(duì)自身的上傳方式和文件服務(wù)器選擇適合自己的方式:
switch ( actionCode ) {
//讀取配置文件時(shí)的請(qǐng)求處理
case ActionMap.CONFIG:
return this.configManager.getAllConfig().toString();
//上傳圖片、視頻、文件時(shí)的處理
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;
//抓取遠(yuǎn)程圖片時(shí)的處理方式,此處也可以關(guān)閉
//當(dāng)從網(wǎng)頁(yè)上復(fù)制內(nèi)容到編輯器中,如果圖片與該域名不同源,則會(huì)自動(dòng)抓到本地的服務(wù)器保存
case ActionMap.CATCH_IMAGE:
conf = configManager.getConfig( actionCode );
String[] list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
state = new ImageHunter( conf ).capture( list );
break;
//上傳多文件時(shí)的文件在線(xiàn)管理
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();
最終的一步,寫(xiě)vue頁(yè)面,插入ueditor組件,直接貼上源代碼如下:
<template>
<div>
<el-row :gutter="20">
<el-col :span="24" class="toolbar">
<h1>完整demo</h1>
<div id="editor" type="text/plain" style="width:100%;height:400px;"></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',{
//此處可以定制工具欄的功能,若不設(shè)置,則默認(rèn)是全部的功能
toolbars: [
[
'anchor', //錨點(diǎn)
'undo', //撤銷(xiāo)
'redo', //重做
'bold', //加粗
'indent', //首行縮進(jìn)
'snapscreen', //截圖
'italic', //斜體
'underline', //下劃線(xiàn)
'strikethrough', //刪除線(xiàn)
'subscript', //下標(biāo)
'fontborder', //字符邊框
'superscript', //上標(biāo)
'formatmatch', //格式刷
'source', //源代碼
'blockquote', //引用
'pasteplain', //純文本粘貼模式
'selectall', //全選
'print', //打印
'preview', //預(yù)覽
'horizontal', //分隔線(xiàn)
'removeformat', //清除格式
'time', //時(shí)間
'date', //日期
'unlink', //取消鏈接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并單元格
'mergedown', //下合并單元格
'deleterow', //刪除行
'deletecol', //刪除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分單元格
'deletecaption', //刪除表格標(biāo)題
'inserttitle', //插入標(biāo)題
'mergecells', //合并多個(gè)單元格
'deletetable', //刪除表格
'cleardoc', //清空文檔
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代碼語(yǔ)言
'fontfamily', //字體
'fontsize', //字號(hào)
'paragraph', //段落格式
'insertimage', //多圖上傳
'edittable', //表格屬性
'edittd', //單元格屬性
'link', //超鏈接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查詢(xún)替換
'map', //Baidu地圖
'gmap', //Google地圖
'insertvideo', //視頻
'help', //幫助
'justifyleft', //居左對(duì)齊
'justifyright', //居右對(duì)齊
'justifycenter', //居中對(duì)齊
'justifyjustify', //兩端對(duì)齊
'forecolor', //字體顏色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //無(wú)序列表
'fullscreen', //全屏
'directionalityltr', //從左向右輸入
'directionalityrtl', //從右向左輸入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分頁(yè)
'insertframe', //插入Iframe
'imagenone', //默認(rèn)
'imageleft', //左浮動(dòng)
'imageright', //右浮動(dòng)
'attachment', //附件
'imagecenter', //居中
'wordimage', //圖片轉(zhuǎn)存
'lineheight', //行間距
'edittip ', //編輯提示
'customstyle', //自定義標(biāo)題
'autotypeset', //自動(dòng)排版
'webapp', //百度應(yīng)用
'touppercase', //字母大寫(xiě)
'tolowercase', //字母小寫(xiě)
'background', //背景
'template', //模板
'scrawl', //涂鴉
'music', //音樂(lè)
'inserttable', //插入表格
'drafts', // 從草稿箱加載
'charts', // 圖表
]
],
BaseUrl: '',
UEDITOR_HOME_URL: 'static/ueditor/'
});
},
destoryed() {
this.editor.destory();
},
methods:{
getUeditorContent: function(){
console.log(this.editor.getContent());
}
}
}
</script>
至此,大功告成,包括文件上傳下載等部分全部搞定,不過(guò)要聲明一點(diǎn)的是,當(dāng)出現(xiàn)接口與頁(yè)面部署域名不同時(shí),點(diǎn)擊選擇圖片上傳會(huì)出現(xiàn)iframe跨域的問(wèn)題。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue2 前后端分離項(xiàng)目ajax跨域session問(wèn)題解決方法
- vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題解決方法
- 詳解VueJs前后端分離跨域問(wèn)題
- 詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案
- 解決前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題
- 詳解利用 Vue.js 實(shí)現(xiàn)前后端分離的RBAC角色權(quán)限管理
- 詳解前后端分離之VueJS前端
- vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼
- 基于vue實(shí)現(xiàn)網(wǎng)站前臺(tái)的權(quán)限管理(前后端分離實(shí)踐)
- Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
相關(guān)文章
VUE項(xiàng)目初建和常見(jiàn)問(wèn)題總結(jié)
在本篇文章里小編給大家整理的是關(guān)于VUE 項(xiàng)目初建和常見(jiàn)問(wèn)題以及相關(guān)知識(shí)點(diǎn)內(nèi)容,有需要的朋友們學(xué)習(xí)下。2019-09-09
vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面
本文給大家分享了vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面的一個(gè)功能,有這方便需要的朋友學(xué)習(xí)參考下吧。2018-01-01
Vue開(kāi)發(fā)手冊(cè)Function-based?API?RFC
這篇文章主要為大家介紹了Vue開(kāi)發(fā)手冊(cè)Function-based?API?RFC使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目中接入websocket時(shí)需要ip端口動(dòng)態(tài)部署問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中接入websocket時(shí)需要ip端口動(dòng)態(tài)部署問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
使用Vue3新特性構(gòu)建動(dòng)態(tài)表單的方法詳解
傳統(tǒng)的表單開(kāi)發(fā)通常需要編寫(xiě)大量的重復(fù)代碼,例如處理用戶(hù)輸入、驗(yàn)證數(shù)據(jù)、更新 UI 等等,為了簡(jiǎn)化開(kāi)發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對(duì)象,所以本文我們將一起學(xué)習(xí)如何使用 Vue 3 的新特性構(gòu)建一個(gè)更加靈活、可擴(kuò)展的動(dòng)態(tài)表單2024-06-06

