关于 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了.