百度ueditor富文本--配置图片上传

我们在之前的文章中已经学习了如何 初始化百度ueditor富文本编辑器:

百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个

官网对编辑器的初始化和使用文档是比较详细的，这里就不多说了。

本小节 主要记录一下 在初始化完编辑器之后  配置启用 编辑器中的 图片上传插件。

项目路径如图:

引用jar包

在ueditor的资源包中我们看到jsp文件夹里有lib文件夹和jar包。

我们需要引用这些jar包才能正常使用 图片上传功能。

我们这里把这些jar包 5个jar 放到 WEB-INF 目录下的lib 中。

右键Build Path ---》Add to Build Path 引用它们。

注意: 如果是maven项目，需要注意pom.xml文件中有没有重复和冲突。

如果有冲突 可以去掉pom中的引用 或者  Build Path 中 Configure Build Path 中把重复的jar包引用 remove。

引用包后 运行项目 正常初始化 编辑器后 发现已经图片上传功能可用了。如图:

原理

打开ueditor.config.js，可以看到服务器统一接口路径。

controller.jsp 作为服务端代码接收上传的文件 存入 本机或者服务器。---当然，读者也可以不使用ueditor自带的这种接收方式，自己实现一个。

我们这里增加一行代码

System.out.print(rootPath);

输出controller.jsp 接收到图片后存放的路径。

运行后初始化编辑器时输出了路径为:

F:\eclipseworkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springshiro

则我们上传的图片 就保存在这个路径。

上传图片完成后 我们在这个路径下 可以看到已经上传的图片:

F:\eclipseworkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springshiro\ueditor\jsp\upload\image\20170824

这个路径 是 可以设置的。

设置的地方在 ueditor文件夹中 config.json里，如图:

imagePathFormat 就是设置的图片保存地址，这是一个相对路径，相对与项目在tomcat中的路径。

但是 这样保存会有一些问题，图片保存在tomcat的webapp项目中时，当重启tomcat后，这些图片就会丢失。

我们会在下一章节 讲解 路径的配置以及上传到远程服务器。

imageUrlPrefix配置的是 图片访问路径的前缀。 

有时候 我们上传图片成功了，但是 回调时显示不出来，就是因为 图片的地址不对。 比如 图片 是放在 项目中的，则访问图片 是需要带 项目名作为前缀的。

我的项目 设置 /  访问 项目，所以设置 "imageUrlPrefix": ""。