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

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

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

1.關于如何將ueditor里面的相關js文件引用到nuxt項目里？ 參考網站：nuxt官網文檔 (https://zh.nuxtjs.org/)

??????????首先,先去百度富文本編輯器官網(http://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了.

總結

以上是生活随笔為你收集整理的关于 Nuxt 集成ueditor的一些坑（包括图片上传）前端部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。