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

时间:2022-12-25 19:32:44




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

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


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


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


项目路径如图:

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




引用jar包


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

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

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

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

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



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

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


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


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


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


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







原理


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

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




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


我们这里增加一行代码

System.out.print(rootPath);


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


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


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

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

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



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


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

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

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






这个路径 是 可以设置的。

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

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



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

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

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



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

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


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