Vue2.0中集成UEditor富文本編輯器的方法
在vue的'項(xiàng)目中遇到了需要使用富文本編輯器的需求,在github上看了很多vue封裝的editor插件,很多對(duì)圖片上傳和視頻上傳的支持并不是很好,最終還是決定使用UEditor。
這類的文章網(wǎng)上有很多,我進(jìn)行了摸索、手寫(xiě)代碼、匯總、排版,形成了這篇文章。
下載對(duì)應(yīng)的UEditor源碼
首先,去官網(wǎng)上下載UEditor的源碼,根據(jù)你后臺(tái)語(yǔ)言的不同下載對(duì)應(yīng)的版本(PHP、Asp、.Net、Jsp)。
http://ueditor.baidu.com/website/download.html
下載之后,把資源放到 /static/ue/ 靜態(tài)目錄下。文檔結(jié)構(gòu)如下:

(我把UEditor放到了static靜態(tài)目錄下面,這里的文件不會(huì)被webpack打包,當(dāng)然你也可以選擇性地放進(jìn)src中)
編輯 UEditor 編輯器 配置文件
我們打開(kāi) ueditor.config.js,修改其中的window.UEDITOR_HOME_UR配置,如下:
window.UEDITOR_HOME_URL = "/static/UE/"; //指定編輯器資源文件根目錄 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
ueditor.config.js文件有很多配置,可以在這里進(jìn)行一些初始化的全局配置,比如編輯器的默認(rèn)寬高等:,initialFrameWidth:1000 //初始化編輯器寬度,默認(rèn)1000 ,initialFrameHeight:320 //初始化編輯器高度,默認(rèn)320
將編輯器集成到系統(tǒng)中
打開(kāi) /src/main.js 文件,插入下面的代碼:
//ueditor import '../static/UE/ueditor.config.js' import '../static/UE/ueditor.all.min.js' import '../static/UE/lang/zh-cn/zh-cn.js' import '../static/UE/ueditor.parse.min.js'
開(kāi)發(fā)公共組件 UE.vue
我們?cè)?/src/components/ 目錄下創(chuàng)建 UE.vue文件,作為我們的編輯器組件文件。
下面代碼提供簡(jiǎn)單功能,具體使用根據(jù)需求完善該組件即可。
<template>
<div>
<script type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'ue',
data () {
return {
editor: null
}
},
props: {
value: '',
config: {}
},
mounted () {
this.editor = window.UE.getEditor('editor', this.config);
this.editor.addListener('ready', () => {
this.editor.setContent(this.value)
})
},
methods: {
getUEContent () {
return this.editor.getContent()
}
},
destroyed () {
this.editor.destroy()
}
}
</script>
組件暴露了兩個(gè)接口:
value是編輯器的文字config是編輯器的配置參數(shù)
在其他頁(yè)面中使用該組件
簡(jiǎn)單地創(chuàng)建一個(gè)需要UEditor的頁(yè)面,再該頁(yè)面中使用剛才封裝好的UE.vue組件:
<template>
<div>
<Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
<button @click="returnContent">顯示編輯器內(nèi)容</el-button>
<div>{{dat.content}}</div>
</div>
</template>
<script>
import Uediter from '@/components/UE.vue';
export default {
data () {
return {
dat: {
content: ''
},
ueditor: {
value: '編輯器默認(rèn)文字',
config: {
initialFrameWidth: 800,
initialFrameHeight: 320
}
}
}
},
methods: {
returnContent () {
this.dat.content = this.$refs.ue.getUEContent()
}
},
components: {
Uediter
},
}
</script>
效果如下:

What's more: 服務(wù)端需要做的配置
配置完上述內(nèi)容后,控制臺(tái)可能會(huì)出現(xiàn)"后臺(tái)配置項(xiàng)返回格式出錯(cuò),上傳功能將不能正常使用!"的報(bào)錯(cuò),
我們?cè)诰庉嬈髦猩蟼鲌D片或者視頻,也會(huì)出現(xiàn)響應(yīng)的報(bào)錯(cuò),這是因?yàn)闆](méi)有配置服務(wù)器的請(qǐng)求接口,在ueditor.config.js中,對(duì)serverUrl進(jìn)行配置:
// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑 , serverUrl: 'http://172.16.254.49:83/File/UEditor' //地址管你們后端要去
- vue中利用simplemde實(shí)現(xiàn)markdown編輯器(增加圖片上傳功能)
- Vuejs中使用markdown服務(wù)器端渲染的示例
- 詳解基于mpvue的小程序markdown適配解決方案
- 實(shí)現(xiàn)Vue的markdown文檔可以在線運(yùn)行的方法示例
- Vue+Element使用富文本編輯器的示例代碼
- Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法
- 在 Vue 項(xiàng)目中引入 tinymce 富文本編輯器的完整代碼
- vue2.0項(xiàng)目中使用Ueditor富文本編輯器示例代碼
- vue中使用ueditor富文本編輯器
- 利用Vue實(shí)現(xiàn)一個(gè)markdown編輯器實(shí)例代碼
相關(guān)文章
vue3+vite加載本地js/json文件不能使用require淺析
這篇文章主要給大家介紹了關(guān)于vue3+vite加載本地js/json文件不能使用require的相關(guān)資料,require 是屬于 Webpack 的方法,在v3+vite的項(xiàng)目里面并不適用,需要的朋友可以參考下2023-07-07
vue實(shí)例配置對(duì)象中el、template、render的用法
這篇文章主要介紹了vue實(shí)例配置對(duì)象中el、template、render的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
element的el-upload組件上傳文件跨域問(wèn)題的幾種解決
跨域問(wèn)題網(wǎng)上搜索很多,感覺(jué)情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問(wèn)題的幾種解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹(shù)狀結(jié)構(gòu)
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹(shù)狀結(jié)構(gòu)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作,結(jié)合具體實(shí)例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下2020-02-02
vue頁(yè)面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加
這篇文章主要為大家介紹了vue頁(yè)面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加逗號(hào)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08

