vue2.x集成百度UEditor富文本編輯器的方法
最近開發(fā)vue項(xiàng)目過程中，由于產(chǎn)品需要在項(xiàng)目中添加富文本編輯器，也在npm上找了幾個(gè)基于vue開發(fā)的富文本編輯器，但是對(duì)兼容性比較高，不能兼容到IE9，10。所以最后決定使用百度UEditor。然后又是各種找如何集成到vue中。好記性不如爛筆頭，記錄下來以便以后需要的時(shí)候可以直接用。
1.首先下載UEditor源碼，將整個(gè)文件放到static文件夾中
2.然后將UEditor集成到項(xiàng)目中去。
找到src/main.js，在main.js中
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'
3.在src/components文件夾下創(chuàng)建公共組件UE.vue文件，作為編輯器組件
<template>
<div class="UE">
<!--這個(gè)地方的大小是可以自己控制的-->
<div id="editor" style="width:100%;height:120px;">
</div>
</div>
</template>
export default {
name:'ue',
props:{
value:{
type:String,
default:""
}
},
data() {
return {
editor: null,
};
},
mounted() {
// 實(shí)例化editor編輯器
this.editor = window.UE.getEditor("editor");
//設(shè)置編輯器默認(rèn)內(nèi)容
this.editor.addListener('ready', () => {
this.editor.setContent(this.value)
})
},
methods: {
//獲取編輯器中的內(nèi)容
getUEContent () {
return this.editor.getContent()
}
},
destroyed() {
// 將editor進(jìn)行銷毀
this.editor.destroy();
}
}
4.我們可以通過ueditor.config.js來改變編輯器所顯示的選項(xiàng)
如果我們默認(rèn)顯示的話，會(huì)是這個(gè)樣子
如果你不需要某些元素，你可以在ueditor.config.js中的toolbars中設(shè)置需要顯示的標(biāo)簽
當(dāng)然你還需要做下其他的配置，比如指定編輯器資源文件根目錄
window.UEDITOR_HOME_URL = "./static/UE/";
在這里友情提示，如果你的項(xiàng)目打包之后不是放在一級(jí)目錄下，建議寫成這樣相對(duì)路徑，不然會(huì)報(bào)錯(cuò)找不到資源。
5.這樣你就可以在其他組件引入使用了，我們可以通過props向編輯器傳遞默認(rèn)顯示的值，還可以通過getUEContent()方法獲取編輯器輸入的內(nèi)容。但是在瀏覽器控制臺(tái)你還是會(huì)看到報(bào)錯(cuò)
后臺(tái)配置項(xiàng)返回格式出錯(cuò)，上傳功能將不能正常使用！
這是因?yàn)槲覀冊(cè)诰庉嬈髦猩蟼鲌D片或者視頻的時(shí)候，沒有配置服務(wù)器請(qǐng)求接口，在ueditor.config.js中，對(duì)serverUrl進(jìn)行配置就可以了
serverUrl: "" //這個(gè)接口地址去跟你們的后臺(tái)要就可以了
到這里，我們就可以愉快的使用UEditor富文本編輯器了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue集成百度UEditor富文本編輯器使用教程
- vue-quill-editor富文本編輯器簡(jiǎn)單使用方法
- Vue-Quill-Editor富文本編輯器的使用教程
- Vue中Quill富文本編輯器的使用教程
- vue如何安裝使用Quill富文本編輯器
- vue富文本編輯器組件vue-quill-edit使用教程
- 在 Vue 項(xiàng)目中引入 tinymce 富文本編輯器的完整代碼
- Vue2.0中集成UEditor富文本編輯器的方法
- vue中使用ueditor富文本編輯器
- vue2.0項(xiàng)目中使用Ueditor富文本編輯器示例代碼
- Vue+Element使用富文本編輯器的示例代碼
- Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
相關(guān)文章
Vue計(jì)算屬性與監(jiān)視屬性詳細(xì)分析使用
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-11-11
Vue實(shí)現(xiàn)無限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個(gè)新需求：列表輪播滾動(dòng),實(shí)現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實(shí)現(xiàn),于是我開始了嘗試,但是在這個(gè)過程中遇到了動(dòng)態(tài)綁定style樣式不生效,所以本文介紹了Vue實(shí)現(xiàn)無限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法2024-08-08
這篇文章主要介紹了nuxt使用vuex存儲(chǔ)及獲取用戶信息踩坑的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 源碼分析之 Observer實(shí)現(xiàn)過程
這篇文章主要介紹了 Vue 源碼分析之 Observer實(shí)現(xiàn)過程，Observer 最主要的作用就是實(shí)現(xiàn)了touch -Data(getter) - Collect as Dependency這段過程，也就是依賴收集的過程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
vue2.x中keep-alive源碼解析(實(shí)例代碼)
Keep-Alive模式避免頻繁創(chuàng)建、銷毀鏈接，允許多個(gè)請(qǐng)求和響應(yīng)使用同一個(gè)HTTP鏈接，這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下2023-02-02
Vue項(xiàng)目通過network的ip地址訪問注意事項(xiàng)及說明
這篇文章主要介紹了Vue項(xiàng)目通過network的ip地址訪問注意事項(xiàng)及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了基于vue封裝下拉刷新上拉加載組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了詳解Vue方法與事件。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼
這篇文章主要介紹了vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
防抖節(jié)流就是使用定時(shí)器 來實(shí)現(xiàn)我們的目的。這篇文章通過實(shí)例代碼給大家介紹vue防抖與節(jié)流的使用，感興趣的朋友跟隨小編一起看看吧2019-11-11