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

這里特別說明jsp目錄下的資源為何不放進來,因為我們是vue搭建的項目,jsp頁面肯定是不會放在前端的項目中的,包括config.json也放在后端用于解析,這里后面會解釋這樣做的原因。
2、前端將文件放進來之后,暫時先這樣,咱們來整理后端的東西。這里將jsp目錄下的lib目中的ueditor.jar文件中的所有類全部拿出來(具體方式自己決定,反編譯工具或者拿到源碼都可以),放到后端項目中,然后在control層新建一個UeditorController.java的類,如下:
/**
* 用于處理關(guān)于ueditor插件相關(guān)的請求
* @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類,如下:

注釋掉原有的讀取配置文件的方式,添加新的讀取路徑,這樣確保ueditor在初始化能夠正確的加載配置文件。此時,修改前端項目中ueditor.config.js中的serverUrl的值為:
// 服務(wù)器統(tǒng)一請求接口路徑 , serverUrl: http://localhost:8080/sys/ueditor/exec
而,針對ActionEnter.java類中,如下代碼后的文件上傳的處理,請大家針對自身的上傳方式和文件服務(wù)器選擇適合自己的方式:
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;
//抓取遠程圖片時的處理方式,此處也可以關(guān)閉
//當從網(wǎng)頁上復(fù)制內(nèi)容到編輯器中,如果圖片與該域名不同源,則會自動抓到本地的服務(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;
//上傳多文件時的文件在線管理
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">
<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è)置,則默認是全部的功能
toolbars: [
[
'anchor', //錨點
'undo', //撤銷
'redo', //重做
'bold', //加粗
'indent', //首行縮進
'snapscreen', //截圖
'italic', //斜體
'underline', //下劃線
'strikethrough', //刪除線
'subscript', //下標
'fontborder', //字符邊框
'superscript', //上標
'formatmatch', //格式刷
'source', //源代碼
'blockquote', //引用
'pasteplain', //純文本粘貼模式
'selectall', //全選
'print', //打印
'preview', //預(yù)覽
'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', //圖片轉(zhuǎn)存
'lineheight', //行間距
'edittip ', //編輯提示
'customstyle', //自定義標題
'autotypeset', //自動排版
'webapp', //百度應(yīng)用
'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>
至此,大功告成,包括文件上傳下載等部分全部搞定,不過要聲明一點的是,當出現(xiàn)接口與頁面部署域名不同時,點擊選擇圖片上傳會出現(xiàn)iframe跨域的問題。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- vue2 前后端分離項目ajax跨域session問題解決方法
- vue+springboot前后端分離實現(xiàn)單點登錄跨域問題解決方法
- 詳解VueJs前后端分離跨域問題
- 詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案
- 解決前后端分離 vue+springboot 跨域 session+cookie失效問題
- 詳解利用 Vue.js 實現(xiàn)前后端分離的RBAC角色權(quán)限管理
- 詳解前后端分離之VueJS前端
- vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼
- 基于vue實現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實踐)
- Vue+axios封裝請求實現(xiàn)前后端分離
相關(guān)文章
vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面
本文給大家分享了vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面的一個功能,有這方便需要的朋友學習參考下吧。2018-01-01
Vue開發(fā)手冊Function-based?API?RFC
這篇文章主要為大家介紹了Vue開發(fā)手冊Function-based?API?RFC使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11
vue項目中接入websocket時需要ip端口動態(tài)部署問題
這篇文章主要介紹了vue項目中接入websocket時需要ip端口動態(tài)部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
使用Vue3新特性構(gòu)建動態(tài)表單的方法詳解
傳統(tǒng)的表單開發(fā)通常需要編寫大量的重復(fù)代碼,例如處理用戶輸入、驗證數(shù)據(jù)、更新 UI 等等,為了簡化開發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對象,所以本文我們將一起學習如何使用 Vue 3 的新特性構(gòu)建一個更加靈活、可擴展的動態(tài)表單2024-06-06

