富文本编辑器Ueditor实战(二)-图片上传

简介: 本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。

     本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题。那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配置Ueditor的图片上传功能。

第一步、复制ueditor1_4_3_3-utf8-jsp工程

     将ueditor1_4_3_3-utf8-jsp复制一份名字改为:ueditor-jsp

第二步、在ueditor-jsp目录下新增WEB-INF/lib目录

如下图

image.png

第三步、将jsp/lib目录下的jar包复制到WEB-INF/lib下,


如下图所示:

image.png

第四步、启动tomcat后,

输入地址:http://localhost:8080/ueditor-jsp/jsp/controller.jsp?action=config,能看到下图说明配置成功

image.png

第五步、测试文件上传。

当再一次进入富文本编辑页面,打开文件上传窗口,你会发现,组件可以正常选择图片。

image.png

等等,别高兴得太早,当你点击文件上传后,并同时点击确认,你会发现在文本输入框内,竟然不是我们要的结果。

image.png

你可打开html编辑器,看到引入的图片地址是下面这样的

image.png

我们发现,文件确实已经成功的上传到了服务器上,因为在文件夹中,我们找到了这些图片。

image.png

只是在实际引用时,地址填错了。那么访问前缀究竟去哪里了呢?如果你对config还有印象的话,你一定会记得config.json设置了相关配置。比如:

image.png

我们将imageUrlPrefix改成完整的访问路径:http://localhost:8080/ueditor-jsp,重新测试图片上传

image.png

总结

   本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。当然,实际使用中,可能会更复杂,不会是这种简单的集成方式,文件上传会采用对象存储的方式,但是思路是想通的,用户可自行扩展。



目录
相关文章
|
JSON 前端开发 JavaScript
富文本编辑器Ueditor实战(三)-springboot集成
通过本文,您可了解springboot如何集成ueditor,如何自定义扩展后端的文件上传功能。
567 0
富文本编辑器Ueditor实战(三)-springboot集成
|
11月前
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
305 0
|
7月前
ueditor编辑器初始化
ueditor编辑器初始化
|
11月前
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
380 0
|
前端开发 JavaScript 搜索推荐
前端封装库/工具库的编辑器之UEditor
随着互联网时代的到来,Web应用程序的内容创作和编辑变得越来越重要。而为了更高效地进行内容编辑和管理,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个经典的编辑器就是UEditor。
118 0
|
开发框架 前端开发 JavaScript
【前端】简单配置使用百度在线文本编辑器UEditor
在本篇文章中,我们讲一起了解下百度在线文本编辑器UEditor的简单配置使用 目前在线编辑器插件网上挺多的,个人觉得UEditor在UI和功能上还是不错的
892 0
|
Java 应用服务中间件 API
富文本编辑器Ueditor实战(一)
本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。
418 0
富文本编辑器Ueditor实战(一)
|
Java
富文本编辑器Ueditor实战(四)-video集成
文章介绍了如何在springboot环境中集成ueditor,以及如何修改配置支持在富文本编辑器中直接预览视频资源。
392 0
富文本编辑器Ueditor实战(四)-video集成
|
Linux PHP
百度ueditorPHP版本编辑器将图片上传到非项目根路径
UEditor 的页面在 a.com 下,serverUrl指向域名在 b.com 域下。这个官方文档是有介绍的:跨域上传。 链接:http://fex.baidu.com/ueditor/#dev-crossdomain
125 0
百度ueditorPHP版本编辑器将图片上传到非项目根路径
|
缓存 前端开发 JavaScript
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
百度编辑器ueditor,单个图和多图上传文件大小限制以及文字提示修改
1091 0

热门文章

最新文章