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在前端配置好后，需要與后端部分配合進(jìn)行，然后將配置ueditor.config.js 里的serverUrl的前綴改陳你自己的后端訪問的請求路徑地址
serverUrl: "統(tǒng)一請求地址"
總結(jié)
以上所述是小編給大家介紹的vue中使用ueditor富文本編輯器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(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)頁面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vite+vue3項目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項目中集成ESLint與prettier的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
Vs-code/WebStorm中構(gòu)建Vue項目的實現(xiàn)步驟
本文主要介紹了在Vs-code/WebStorm中構(gòu)建Vue項目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了element-ui在table中如何禁用其中幾行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue中CSS動畫原理的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue項目報錯Extra?semicolon?(semi)問題及解決
這篇文章主要介紹了vue項目報錯Extra?semicolon?(semi)問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Element中Upload組件上傳功能實現(xiàn)(圖片和文件的默認(rèn)上傳及自定義上傳)
這篇文章主要介紹了Element中Upload組件上傳功能實現(xiàn)包括圖片和文件的默認(rèn)上傳及自定義上傳,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01