關於 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了.