vue中使用ueditor富文本編輯器
最近在做后臺(tái)管理系統(tǒng)的時(shí)候遇到要使用富文本編輯器。最后選擇了ueditor，我的項(xiàng)目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建，
1、下載UEditor官網(wǎng)最新的jsp版本的包，下載完成解壓之后得到一個(gè)utf8-jsp的文件夾，里面包含的內(nèi)容如下：
2、將這個(gè)文件夾改名為ueditor,并且移入自己項(xiàng)目中的static文件夾下，修改ueditor.config.js文件夾中的內(nèi)容，如下圖：
3、編寫(xiě)子組件
<template>
<div :id="id" type="text/plain"></div>
</template>
<script>
import '../../../static/ueditor/ueditor.config.js'
import '../../../static/ueditor/ueditor.all.min.js'
import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
import '../../../static/ueditor/ueditor.parse.min.js'
export default {
name: 'UE',
data() {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String,
default: '請(qǐng)輸入內(nèi)容'
},
config: {
type: Object
},
id: {
type: String,
default: `ue${Math.random(0, 100)}`
}
},
mounted() {
this.$nextTick(() => {
this.editor = UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", () => {
this.editor.execCommand('insertHtml', this.defaultMsg);
this.editor.focus() // 確保UE加載完成后，放入內(nèi)容。
})
})
},
methods: {
getUEContent() { // 獲取內(nèi)容方法
return this.editor.getContent()
},
clearContent() { // 清空編輯器內(nèi)容
return this.editor.execCommand('cleardoc');
},
},
beforeDestroy() {
// 組件銷(xiāo)毀的時(shí)候，要銷(xiāo)毀 UEditor 實(shí)例
if (this.editor !== null && this.editor.destroy) {
this.editor.destroy();
}
}
}
</script>
<style scoped></style>
4、在父組件中使用
<UE :config="configEditor" :id="ue1" ref="ue" :defaultMsg="val"></UE>
5、弄好之后，上傳圖片會(huì)提示后端配置項(xiàng)http錯(cuò)誤，文件上傳會(huì)提示上傳錯(cuò)誤。這里提別申明一點(diǎn)，ueditor在前端配置好后，需要與后端部分配合進(jìn)行，然后將配置ueditor.config.js 里的serverUrl的前綴改陳你自己的后端訪問(wèn)的請(qǐng)求路徑地址
serverUrl: "統(tǒng)一請(qǐng)求地址"
總結(jié)
以上所述是小編給大家介紹的vue中使用ueditor富文本編輯器，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在vue中使用eacharts創(chuàng)建graph關(guān)系圖方式
這篇文章主要介紹了在vue中使用eacharts創(chuàng)建graph關(guān)系圖方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vite+vue3項(xiàng)目集成ESLint與prettier的過(guò)程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中集成ESLint與prettier的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot> 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
Vs-code/WebStorm中構(gòu)建Vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了在Vs-code/WebStorm中構(gòu)建Vue項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了element-ui在table中如何禁用其中幾行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中CSS動(dòng)畫(huà)原理的實(shí)現(xiàn)
這篇文章主要介紹了Vue中CSS動(dòng)畫(huà)原理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目報(bào)錯(cuò)Extra?semicolon?(semi)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Element中Upload組件上傳功能實(shí)現(xiàn)(圖片和文件的默認(rèn)上傳及自定義上傳)
這篇文章主要介紹了Element中Upload組件上傳功能實(shí)現(xiàn)包括圖片和文件的默認(rèn)上傳及自定義上傳,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01