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");
//設置編輯器默認內(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中設置需要顯示的標簽
當然你還需要做下其他的配置，比如指定編輯器資源文件根目錄
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結合Ueditor富文本編輯器的實例代碼
相關文章
今天小編就為大家分享一篇Vue文件配置全局變量的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue中偵聽器使用的相關知識，文中的示例代碼講解詳細，具有一定的借鑒價值，有需要的小伙伴可以跟隨小編一起學習一下2007-02-02
Web應用程序中資源分頁不僅對性能很有幫助，而且從用戶體驗的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動態(tài)和可用的分頁組件2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片滑動驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js實現(xiàn)一個漂亮、靈活、可復用的提示組件示例
這篇文章主要介紹了Vue.js實現(xiàn)一個漂亮、靈活、可復用的提示組件示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了基于vue中的scoped坑點解說，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)Input輸入框模糊查詢方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)數(shù)字翻頁動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Vue3表單組件el-form校驗規(guī)則rules屬性示例詳解
在el-form中正確使用rules校驗是非常重要的,rules使用不當容易出現(xiàn)規(guī)則不生效、規(guī)則一直被觸發(fā)等各種現(xiàn)象,這篇文章主要給大家介紹了關于Vue3表單組件el-form校驗規(guī)則rules屬性的相關資料,需要的朋友可以參考下2024-08-08