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