vue项目集成Ueditor使用总结

我们从官方地址下载资源包 https://ueditor.baidu.com/website/download.html!
企业微信20190305025245.png
这里我下载的是UTF-8版本,解压目录如下图:(这里我已php为例)

企业微信20190305025500.png

我们将php代码放到后台,因为我们是vue项目,要做到前后端分离,剩下的资源库都是前端的资源,如果你不是前后端分离的项目,那前端人员什么也不用做了,把这些代码直接放到后台就行了,直接服务器渲染即可(这个方法要比vue项目配置简单很多)
我们将除了php文件夹的文件整理放到一个UEditor文件夹,(一定不要包含后端代码,因为我们后台代码需要更改点源码,你要是不删除,等你打包的时候会把php文件也打包进去,到时候后台人员不注意,直接将他改的源码的php文件会给覆盖掉,为了防止万一,我们前端就把php文件直接删除)将UEditor放到我们vue项目的static目录下,如下图:
企业微信20190305030013.png

1.先说前端的工作
一般富文本编辑器都是用来写文章的,我们建立一个article.vue页面,在这里配置编辑器,具体代码快如下







2.后台代码配置
后台我使用的是Thinkphp5,我们php代码跟前端目录结构一样,放在public/static/UEditor目录下,如下图:


企业微信20190305030834.png

因为是vue的项目,必然会出现跨域的现象,我们在php/controller.php文件夹开启允许跨域设置,如下图:


企业微信20190305031223.png

这样不出意外的话我们的编辑器是配置成功了


企业微信20190305031337.png

还是有点细节我们需要注意,当你上传图片的时候,你发现能够上传成功,图片也上传到后台了,就是编辑器中图片不显示,你调试你会发现他的url地址不太对,他拿着vue-server的地址+图片路径拼接的,这肯定是访问不到的,我们需要配置下后台的文件前缀,主要是在php/config.json文件配置


企业微信20190305031752.png

如果我们直接在这里配置是没有问题,就是不太灵活,我们在测试环境和正式环境的地址都不一样,每次上线就要想着更改这里,挺麻烦,我们直接在代码里配置,直接获取协议+地址+端口配置路径,更改controller.php文件 具体如下图


企业微信20190305032030.png

到此为止我们服务器的配置基本完成
如果我们发现上传视频和图片太大上传失败的话,还是后台配置的问题,检查后台post允许上传的文件大小和nginx服务器允许上传的大小,这样基本解决

你可能感兴趣的:(vue项目集成Ueditor使用总结)