vue集成百度UEditor富文本編輯器

 

在前端開發的項目中。不免會遇到須要在頁面上集成一個富文本編輯器。那麼。若是你有這個需求。但願能夠幫助到你

vue是前端開發者所追捧的框架，簡單易上手，可是基於vue的富文本編輯器大多數太過於精簡。因而我將百度富文本編輯器放到vue項目中使用。效果圖以下

廢話很少說。

一、使用vue-cli構建一個vue項目。而後下載UEditor源碼。地址：http://ueditor.baidu.com/website/
把項目複製到vue項目的static文件下。目的是讓服務能夠訪問到裏面的文件，打開UEditor目錄文件。這裏下載的是jsp版本的。文件名字沒有更改過。打開裏面的ueditor.config.js文件找到serverUrl把這行代碼註釋了。這個代碼是用來上傳圖片的後臺地址。若是不註釋了會請求報錯。編輯器跑起來再作服務配置修改地址。
二、在.vue文件中引入主要js文件
import ‘../../static/utf8-jsp/ueditor.config’
import ‘../../static/utf8-jsp/ueditor.all’;
import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn’;
三、在data中申明一個變量存儲UEditor的實例方便在vue的其餘地方使用，而後申明一個變量存儲手動獲取的編輯器裏面的內容，再什麼一個變量存儲初始化時要寫入編輯器的內容。三個變量。若是操做得當。能夠減小變量的時候。這是笨辦法
四、在vue的mounted鉤子函數中調用編輯器的方法生成實例存儲到剛剛申明的變量中，在實例中傳入參數。第一個是id，id是生成編輯器的div的id。第二個參數是一個對象。對象內容是對編輯器的配置。如資源訪問路徑，toolbars內容配置。
五、在html部分寫一個div標籤
<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>
六、而後配置資源路徑。在實例化的時候傳入的參數裏。第二個參數是一個對象。內容包括路徑。
this.ue = UE.getEditor('editor',{
BaseUrl: '',
UEDITOR_HOME_URL: 'static/utf8-jsp/',
});
這個UEDITOR_HOME_URL就是配置編輯器本身訪問本身所須要的依賴的路徑。設置到存放的文件下utf8-jsp是編輯器文件的更目錄。目錄不同可自行更改
七、而後保存。就能夠在界面上顯示一個完整的富文本編輯器
八、若是要獲取內容則使用在data裏面申明的編輯器實例在vue中this.實例調用方法getContent()能夠獲取到內容
9若是要設置內容則調用：setContent('歡迎使用ueditor');
更多方法參考官方文檔。
十、文檔內容屬於我的踩坑的心得。若有錯誤。請留言指出。謝謝
十一、須要注意的是資源路徑容易搞錯。使用相對路徑便可
十二、貼出代碼

html

<template>
<div class="hello">
<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>
<button @click="submits">保存</button>
<button @click="xieru">寫入</button>
</div>
</template>


js

<script>
import '../../static/utf8-jsp/ueditor.config'
import '../../static/utf8-jsp/ueditor.all';
import '../../static/utf8-jsp/lang/zh-cn/zh-cn';
export default {
name: 'hello',
data () {
return {
ue: '',
uedata: [],
xierudata: []
}
},
mounted() {
this.ue = UE.getEditor('editor',{
BaseUrl: '',
UEDITOR_HOME_URL: 'static/utf8-jsp/',
// toolbars:[]
});
},
methods: {
submits(){
this.uedata.push(UE.getEditor('editor').getContent());
console.log(this.uedata.join("\n"));
},
xieru(){
UE.getEditor('editor').setContent('歡迎使用ueditor');
}
}
}
</script>