這篇文章主要介紹laravel+vue組合項(xiàng)目中如何引入ueditor，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

目前成都創(chuàng)新互聯(lián)已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、陽(yáng)泉網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1、下載editor

這個(gè)直接去ueditor的官網(wǎng)下載其PHP版本的就可以了，沒(méi)什么好說(shuō)的

2、移到項(xiàng)目目錄中（主要講如何放置配置文件和靜態(tài)資源文件）

打開(kāi)下載好的ueditor目錄，如果版本沒(méi)有錯(cuò)也沒(méi)出什么問(wèn)題，應(yīng)該就會(huì)看到如下目錄及文件

這里面：ueditor.all.js、ueditor.config.js、ueditor.parse.js以及l(fā)ang/zh-cn/zh-cn.js 是我們需要拿來(lái)在vue中加載的配置文件，所以我直接放在了resources/assets/js目錄下（當(dāng)然這里我們推薦的是引入這些配置文件對(duì)應(yīng)的.min.js的文件，如果有的話。。。還有放置的目錄也可以自己定義，

不過(guò)這里我們?yōu)榱朔奖銋^(qū)分和引入，所以就按前面說(shuō)的目錄來(lái)放了），像這樣

當(dāng)然，放置好了配置文件，剩下的四個(gè)目錄我們就直接放在laravel默認(rèn)的靜態(tài)資源目錄public/js下面，像這樣：

3、定義公共的ueditor組件（方面多處引用）

這里同樣為了方便引入，我們直接在ueditor的配置文件的同級(jí)目錄下新建UEditor.vue組件

然后編寫(xiě)我們的ueditor組件，這里為了方便喜歡“偷懶”小伙伴們?，就不放圖片了，直接上代碼（是不是很貼心）

好了，我們的公共編輯器組件就已經(jīng)定義好啦。

可能會(huì)有些小伙伴覺(jué)得ueditor的工具欄實(shí)在是太多了，好多都是自己幾乎用不到的，放在那里占地方不說(shuō)，還降低了我們項(xiàng)目的加載速度，這里也許有些看過(guò)ueditor.config.js 配置文件的小伙伴應(yīng)該會(huì)看到這樣一項(xiàng)配置：

這里我們看到它的注釋已經(jīng)明確的告訴我們它的作用了：工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實(shí)例時(shí)選擇自己需要的重新定義

所以很簡(jiǎn)單了，想要精簡(jiǎn)編輯器的小伙伴們可以直接在我們的公共ueditor組件的生命周期函數(shù)mounted里覆蓋此配置就好啦，附上一個(gè)我自己配置的代碼：

mounted() {
　　window.UEDITOR_CONFIG.toolbars = [[
　　　　'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 　　　　'|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
　　　　'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontfamily', 'fontsize'
　　]]
　　this.editor = UE.getEditor(this.id)
}

4、使用ueditor組件

到這里我們已經(jīng)可以直接在我們其他任意的vue組件里使用我們的公共組件了：

在script標(biāo)簽中直接引入公共組件的UEditor.vue 文件，像這樣：import UE from '../editor/UEditor.vue';

然后注冊(cè)該組件：

components: {
　　UE
}

接下來(lái)我們就可以直接在template模板中使用UE組件了：