本文部分参考一下项目:https://blog.csdn.net/eunyeon/article/details/71330542,
https://blog.csdn.net/wk2197727/article/details/79192261
https://www.cnblogs.com/roy-blog/p/7250668.html
感谢以上作者!
1、项目需求:
使用百度富文本编辑器实现“重要节假日高速出行指南内容”编辑,功能涉及图片、视频上传。
2、存在问题
百度富文本编辑器默认将图片、视频上传至项目里,如果使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再copy到服务器明显不方便,这时可以配置图片保存位置,将图片保存到项目外的地方。
3、解决方法:
(1)将图片、视频等上传至FTP服务区
可参考:https://blog.csdn.net/qian5211991/article/details/80760743
(2)将图片、视频等上传至非工程目录下(如D:\tmp)
解决步骤(已上传视频为例):
1、正常引入相关js
2、实例化编辑器并自定义图片保存路径(可参考:http://fex.baidu.com/ueditor/#qa-customurl)
其中,标红的是重写上传的后台方法,后面会有说明。
3、上传图片配置项
修改config.json文件中,图片、视频上传相关内容,如下:
注意标红处内容。
4、后台保存上传图片、视频,如下:
与2步骤中,图片请求地址相同。
至此图片完成上传功能(FTP相关工具包,如需要,请留言,谢谢)
5、配置Tomcat虚拟路径,使图片回显,注意tomcat启动方式的区别!!!!!!(参考:http://www.cnblogs.com/gccbuaa/p/7226139.html)。
(1)通过tomcat 的bin文件夹下通过startup.bat启动
打开tomcat - conf下的server.xml文件,在Host节点下添加
<Context docBase="G:/upload/images" path="/images" />
注:docBase为图片保存的位置,path为图片的访问路径。
如下图:
(2)在eclipse里面启动的tomcat(要修改eclipse下尝试寻找tomcat的server.xml)
在workspace的Server文件夹里找到了tomcat的配置文件。然后改动这里的server.xml就能够了,修改方法同(1)
至此,图片回显完成!
6、清理ueditor中上传的无用的图片
请参考:https://blog.csdn.net/qian5211991/article/details/80764852