vue中使用ueditor富文本編輯器
最近在做后臺管理系統(tǒng)的時候遇到要使用富文本編輯器。最后選擇了ueditor,我的項目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建,
1、下載UEditor官網(wǎng)最新的jsp版本的包,下載完成解壓之后得到一個utf8-jsp的文件夾,里面包含的內(nèi)容如下:


2、將這個文件夾改名為ueditor,并且移入自己項目中的static文件夾下,修改ueditor.config.js文件夾中的內(nèi)容,如下圖:


3、編寫子組件
<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: '請輸入內(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() {
// 組件銷毀的時候,要銷毀 UEditor 實例
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、弄好之后,上傳圖片會提示后端配置項http錯誤,文件上傳會提示上傳錯誤。這里提別申明一點,ueditor在前端配置好后,需要與后端部分配合進行,然后將配置ueditor.config.js 里的serverUrl的前綴改陳你自己的后端訪問的請求路徑地址
serverUrl: "統(tǒng)一請求地址"
總結(jié)
以上所述是小編給大家介紹的vue中使用ueditor富文本編輯器,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
在vue中使用eacharts創(chuàng)建graph關(guān)系圖方式
這篇文章主要介紹了在vue中使用eacharts創(chuàng)建graph關(guān)系圖方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果
這篇文章主要為大家詳細介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12
vite+vue3項目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項目中集成ESLint與prettier的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vs-code/WebStorm中構(gòu)建Vue項目的實現(xiàn)步驟
本文主要介紹了在Vs-code/WebStorm中構(gòu)建Vue項目,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue項目報錯Extra?semicolon?(semi)問題及解決
這篇文章主要介紹了vue項目報錯Extra?semicolon?(semi)問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Element中Upload組件上傳功能實現(xiàn)(圖片和文件的默認上傳及自定義上傳)
這篇文章主要介紹了Element中Upload組件上傳功能實現(xiàn)包括圖片和文件的默認上傳及自定義上傳,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01

