這篇文章給大家介紹怎么在vue中使用UEditor富文本編輯器，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

網站建設哪家好，找創新互聯建站！專注于網頁設計、網站建設、微信開發、小程序開發、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了慈溪免費建站歡迎大家使用！

1、使用vue-cli構建一個vue項目。然后下載UEditor源碼，

把項目復制到vue項目的static文件下。目的是讓服務可以訪問到里面的文件，打開UEditor目錄文件。這里下載的是jsp版本的。文件名字沒有更改過。打開里面的ueditor.config.js文件找到serverUrl把這行代碼注釋了。這個代碼是用來上傳圖片的后臺地址。如果不注釋了會請求報錯。編輯器跑起來再做服務配置修改地址。

2、在.vue文件中引入主要js文件

import ‘../../static/utf8-jsp/ueditor.config' 
import ‘../../static/utf8-jsp/ueditor.all'; 
import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn';

3、在data中申明一個變量存儲UEditor的實例方便在vue的其他地方使用，然后申明一個變量存儲手動獲取的編輯器里面的內容，再什么一個變量存儲初始化時要寫入編輯器的內容。三個變量。如果操作得當。可以減少變量的時候。這是笨辦法

4、在vue的mounted鉤子函數中調用編輯器的方法生成實例存儲到剛剛申明的變量中，在實例中傳入參數。第一個是id，id是生成編輯器的div的id。第二個參數是一個對象。對象內容是對編輯器的配置。如資源訪問路徑，toolbars內容配置。

5、在html部分寫一個div標簽

<div id="editor" type="text/plain" ></div>

6、然后配置資源路徑。在實例化的時候傳入的參數里。第二個參數是一個對象。內容包括路徑。

this.ue = UE.getEditor('editor',{ 
BaseUrl: '', 
UEDITOR_HOME_URL: 'static/utf8-jsp/', 
});

這個UEDITOR_HOME_URL就是配置編輯器自己訪問自己所需要的依賴的路徑。設置到存放的文件下utf8-jsp是編輯器文件的更目錄。目錄不一樣可自行更改

7、然后保存。就可以在界面上顯示一個完整的富文本編輯器

8、如果要獲取內容則使用在data里面申明的編輯器實例在vue中this.實例調用方法getContent()可以獲取到內容

9如果要設置內容則調用：setContent('歡迎使用ueditor');

更多方法參考官方文檔。

10、文檔內容屬于個人踩坑的心得。如有錯誤。請留言指出。謝謝

11、需要注意的是資源路徑容易搞錯。使用相對路徑即可

12、貼出代碼

html

<template> 
<div class="hello"> 
<div id="editor" type="text/plain" ></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>

關于怎么在vue中使用UEditor富文本編輯器就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享題目：怎么在vue中使用UEditor富文本編輯器
分享地址：http://vcdvsql.cn/article2/jhejic.html

成都網站建設公司_創新互聯，為您提供網站設計公司、服務器托管、外貿網站建設、關鍵詞優化、企業網站制作、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯