我们在之前的文章中已经学习了如何 初始化百度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);
运行后初始化编辑器时输出了路径为:
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": ""。