關於 Nuxt 整合ueditor的一些坑（包括圖片上傳）前端部分

最近公司接了一個專案，裡面用到富文字編輯器，剛開始用的是vue-quill-editor，這個編輯器輕量、好用。最重要的是它有專門正對nuxt的版本，很容易配置，可以放心使用，不用擔心bug之類的，遇到問題，在網上也能搜到相應的解決方法。

但是了，我們專案經理就嫌棄這編輯器太輕量了，說能不能換百度的？（到時內心mmp）,給他說了一堆理由（百度的編輯器就稍微豐富了一些，圖片上傳這些功能vue-quill-editor也有啊、ueditor沒有專門正對nuxt這種ssr版本的、往nuxt裡面引導會出現一系列bug等）然並卵，說讓我弄吧，當時有點絕望，本來我也不是大神，只是個小菜鳥，而且當時手上還有其他任務怕沒時間做（要知道配置這種東西，很費時間），沒辦法，最後只能自己百度然後各種採坑了。

寫這篇文章主要是給那些需要的人，文章中如有錯誤，感謝大家勇於指正，好了，廢話不多說，來看一下我這個小白遇到的問題：

1.關於如何將ueditor裡面的相關js檔案引用到nuxt專案裡？ 參考網站：nuxt官網文件 (zh.nuxtjs.org/)

          首先,先去百度富文字編輯器官網(ueditor.baidu.com/website/)去下載ueditor 1.4.3.3 jsp 版本utf-8 然後把下下來的檔案自己新建資料夾放進去（除了jsp資料夾）

我的目錄結構

(我把除了jsp的資料夾以外的所有檔案放到了新建資料夾Ueditor裡面，然後再把Ueditor資料夾放到nuxt的static下面，至於為何放到static裡，請去看nuxt的官方文件)

        然後給大家說一下nuxt引入外部js、css等檔案的地方，nuxt不要向一般的vue那樣在main.js裡面引入外部js,nuxt引入外部檔案在nuxt.config.js裡面

上圖·有幾處要說一下，首先是static資料夾在nuxt裡面的相對路徑，千萬不要寫/static/xx,去看官方文件，直接就是/,那時候沒看官網直接自己去找路徑、結果就是404，其次上面的js引入順序，按照這個順序寫吧，不然會載入出差或者載入不完全，基本這倆點搞定就ok了。

2.關於ueitor封裝成元件統一呼叫及ueditor.config.js（前端主要配置檔案）配置的問題

          關於封裝成元件的形式，請大家看這篇部落格 (https://www.cnblogs.com/ocean-sky/p/7132319.html),裡面講的很詳細，博主裡面github都放了相關的程式碼，封裝元件就按這個來沒錯，如果你的ueditor裡面檔案各種報錯的話可以去拷貝一份下來（樓樓的上傳圖片一直不顯示按鈕，就烤了一份ueditor.all.js檔案下來就ok了）

          關於ueditor.config.js的配置,貼幾張圖片大家看一下

3.說一下上傳圖片的問題

       首先我們配好ueditor後，正常情況下上傳圖片啊、視訊這些是壞的，因為需要後端配置（參考上面那篇部落格裡面的後端配置），後端配置好了後，會給你返回地址也就是我們上圖那個伺服器統一請求介面路徑

注意：這個點選上傳圖片的按鈕只有下面圖中介面返回正確才會出現，否則就是提示後端配置項沒有載入完成巴拉巴拉這類的

這個介面必須呼叫成功返回相關的配置項。

然後，就是上傳問題了，我不是說我之前考了一份ueditor.all.js檔案嗎？在這個裡面單圖上傳的檔案被改過，就是下圖的地方

他用jquery的ajax請求的主要為了解決跨域的問題，大家都指導vue這類的框架，最好就不要扯上jquery了，so,當時就報錯了，後來自己下面就重新寫的請求

也就換了請求方法，你自己也可以用其他的方式。

最後提一下，圖片上傳介面返回的一個錯誤

點選上傳他會請求介面傳送這倆個引數（不要擔心引數、這都是ueditor弄好的），而有一種錯誤是我遇到的，那就是介面返回state是解析上傳表單失敗？啊哈，這是後端沒有解析好你發的東西，我的後端小夥伴說是給他傳的upfile是null,一臉懵逼，後來才查到是他那邊springboot還是什麼的跟什麼衝突了巴啦啦的（就他解析你引數的那個方法讓他查一下為什麼是null就百度出來了），總之你如果也碰到這個問題，可以讓你的後端小夥伴上網上查一下， 解決了就好了。

最後想說一定要看相關的文件，然後多去思考，剛開始感覺難，但是一步一步走過來，和身邊的小夥伴配合就ok了.