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)文章
使用Vue如何寫(xiě)一個(gè)雙向數(shù)據(jù)綁定(面試常見(jiàn))
這篇文章主要介紹了使用Vue如何寫(xiě)一個(gè)雙向數(shù)據(jù)綁定,在前端面試過(guò)程中經(jīng)常會(huì)問(wèn)到,文中主要實(shí)現(xiàn)v-model,v-bind 和v-click三個(gè)命令,其他命令也可以自行補(bǔ)充。需要的朋友可以參考下2018-04-04如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問(wèn)題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06element中async-validator異步請(qǐng)求驗(yàn)證使用
本文主要介紹了element中async-validator異步請(qǐng)求驗(yàn)證使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題
這篇文章主要給大家介紹了如何解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題,文中通過(guò)圖文結(jié)合的方式講解的非常詳細(xì),有需要的朋友可以參考下2024-05-05解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11