Ueditor作為富文本框雖然已經停更較久了，但依然是一種功能非常強大的富文本框，可以隨意添加視頻、圖片等
Vue作為目前前后端分離專案中比較熱門的技術，如何去兼容Vue并且正確的使用他，是一個資料較少的問題，目前其他資料中多半為給出的Demo，這里講解一下專案模塊化的用法
所以，今天來寫一下，關于Vue前端如何兼容Ueditor并且模塊化使用的內容
首先，https://github.com/fex-team/ueditor 可以在這里進行下載，當然也可以和我一樣，手動加入，選擇Jsp模塊下載，目錄如下
此處不多贅述，網上資料有很多
下面為重點，為了工程化開發，建議在utils中進行配置全域變數，當然也可以隨用隨配置
配置之后我們秉承一個模塊化思想，將富文本框做成一個模塊，這樣使用時就可以直接引入
UE.vue的內容如下，UE_STATTIC_PATH，UE_SERVER_URL即為上面我們定義的兩個介面
<template>
<vue-ueditor-wrap
v-model="content"
:config="myConfig"
style="max-width: 1200px; margin: 0 auto"
>{{ content }}</vue-ueditor-wrap
>
</template>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import { UE_STATIC_PATH,UE_SERVER_URL } from "@/utils/global";
export default {
components: { VueUeditorWrap },
data() {
return {
content: "",
myConfig: {
// 介面位置
serverUrl: UE_SERVER_URL,
// 你的UEditor資源存放的路徑,相對于打包后的index.html
UEDITOR_HOME_URL: UE_STATIC_PATH,
// 編輯器不自動被內容撐高
autoHeightEnabled: false,
// 工具列是否可以浮動
autoFloatEnabled: false,
// 初始容器高度
initialFrameHeight: 340,
// 初始容器寬度
initialFrameWidth: "100%",
// 關閉自動保存
enableAutoSave: true,
},
};
},
};
</script>
<style scoped>
</style>模塊做好了，那么我們應該如何去參考到界面中，
其實很簡單
，僅僅一行代碼而已，這也就是Vue所一直強調的代碼模塊化，工程化，當然，這也編譯器是不會識別“UE”這個字串的
還需要我們引入一下
完成，重繪一下界面就可以看到富文本的內容了，然而有的小伙伴有這樣一個問題，通過引入的方式，這樣如何去訪問到UE.vue中的content，也就是我們雙向系結的內容呢
其實也很簡單
直接呼叫父類即可，如此我們的富文本就可以在前端正式完成，后端配置部分我們下次再講，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/248615.html
標籤：其他
上一篇：淺拷貝和深拷貝的區別（詳解）
下一篇：Git合并分支的流程步驟