vue2.x集成百度UEditor富文本編輯器的方法
最近開(kāi)發(fā)vue項(xiàng)目過(guò)程中，由于產(chǎn)品需要在項(xiàng)目中添加富文本編輯器，也在npm上找了幾個(gè)基于vue開(kāi)發(fā)的富文本編輯器，但是對(duì)兼容性比較高，不能兼容到IE9，10。所以最后決定使用百度UEditor。然后又是各種找如何集成到vue中。好記性不如爛筆頭，記錄下來(lái)以便以后需要的時(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)行銷(xiāo)毀
this.editor.destroy();
}
}
4.我們可以通過(guò)ueditor.config.js來(lái)改變編輯器所顯示的選項(xiàng)
如果我們默認(rèn)顯示的話(huà)，會(huì)是這個(gè)樣子
如果你不需要某些元素，你可以在ueditor.config.js中的toolbars中設(shè)置需要顯示的標(biāo)簽
當(dāng)然你還需要做下其他的配置，比如指定編輯器資源文件根目錄
window.UEDITOR_HOME_URL = "./static/UE/";
在這里友情提示，如果你的項(xiàng)目打包之后不是放在一級(jí)目錄下，建議寫(xiě)成這樣相對(duì)路徑，不然會(huì)報(bào)錯(cuò)找不到資源。
5.這樣你就可以在其他組件引入使用了，我們可以通過(guò)props向編輯器傳遞默認(rèn)顯示的值，還可以通過(guò)getUEContent()方法獲取編輯器輸入的內(nèi)容。但是在瀏覽器控制臺(tái)你還是會(huì)看到報(bào)錯(cuò)
后臺(tái)配置項(xiàng)返回格式出錯(cuò)，上傳功能將不能正常使用！
這是因?yàn)槲覀冊(cè)诰庉嬈髦猩蟼鲌D片或者視頻的時(shí)候，沒(méi)有配置服務(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文件配置全局變量的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue中偵聽(tīng)器使用的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2007-02-02
Vue分頁(yè)組件實(shí)現(xiàn)過(guò)程詳解
Web應(yīng)用程序中資源分頁(yè)不僅對(duì)性能很有幫助，而且從用戶(hù)體驗(yàn)的角度來(lái)說(shuō)也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁(yè)組件2022-12-12
vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了基于vue中的scoped坑點(diǎn)解說(shuō)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue實(shí)現(xiàn)Input輸入框模糊查詢(xún)方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)Input輸入框模糊查詢(xún)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Vue3表單組件el-form校驗(yàn)規(guī)則rules屬性示例詳解
在el-form中正確使用rules校驗(yàn)是非常重要的,rules使用不當(dāng)容易出現(xiàn)規(guī)則不生效、規(guī)則一直被觸發(fā)等各種現(xiàn)象,這篇文章主要給大家介紹了關(guān)于Vue3表單組件el-form校驗(yàn)規(guī)則rules屬性的相關(guān)資料,需要的朋友可以參考下2024-08-08