您好,登錄后才能下訂單哦!
這篇文章主要介紹vue中如何使用ueditor富文本編輯器,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
最近在做后臺(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、編寫子組件
<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() { // 組件銷毀的時(shí)候,要銷毀 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的前綴改陳你自己的后端訪問的請求路徑地址
serverUrl: "統(tǒng)一請求地址"
以上是“vue中如何使用ueditor富文本編輯器”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。