這篇文章將為大家詳細(xì)講解有關(guān)Vue.js中如何使用Ueditor富文本編輯器，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

公司主營業(yè)務(wù)：做網(wǎng)站、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出琿春免費做網(wǎng)站回饋大家。

1. 總體思路

1.1 模塊化

vue的很大的一個優(yōu)勢在于模塊化，我們可以通過模塊化實現(xiàn)頁面和邏輯的復(fù)用。所以可以把Ueditor重新封裝成一個.vue的模板文件。其他組件通過引入這個模板實現(xiàn)代碼復(fù)用。

1.2 數(shù)據(jù)傳輸

首先父組件需要設(shè)置編輯器的長度、寬度、初始文本，這些數(shù)據(jù)可以通過props來傳遞。編輯器中的文本變化可以通過vue自定義事件向父組件傳遞。

2. 具體實現(xiàn)步驟

2.1 引入關(guān)鍵的JS以及CSS文件

將以下文件全部拷貝到項目中

2.2 配置Ueditor.config.js

首先配置URL參數(shù)，我們需要將這個路徑指向剛才拷貝的文件的更目錄，注意這里最好使用相對路勁。

var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';

然后是默認(rèn)寬度高度的設(shè)置

,initialFrameWidth:null // null表示寬度自動
,initialFrameHeight:320

其他功能的配置可以在官方文檔查看

2.3 創(chuàng)建編輯器模板

我們需要在編輯器模板中import Ueditor核心JS庫，并添加contentChange回調(diào)函數(shù)就大功告成了。

之所以使用import語法來引入核心JS庫是因為這樣更符合ES6模塊化的規(guī)范，我看到網(wǎng)上有人建議在main.js中引入JS，但是過早地引入JS可能導(dǎo)致頁面首次加載緩慢。

3. 編輯器的使用

使用編輯器模板的時候我需要通過props傳入config以及初始文本value。