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

38 篇文章 6 订阅

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

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

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

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

图片

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

图片

        第四步、启动tomcat后,输入地址:http://localhost:8080/ueditor-jsp/jsp/controller.jsp?action=config,能看到下图说明配置成功

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
1. 添加依赖 在pom.xml文件中添加 TinyMCE 和 commons-fileupload 依赖: ```xml <dependency> <groupId>org.webjars.npm</groupId> <artifactId>tinymce</artifactId> <version>5.2.2</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> ``` 2. 添加配置 在application.properties文件中添加以下配置: ```properties # 设置上传文件的最大限制为10MB spring.servlet.multipart.max-file-size=10MB spring.servlet.multipart.max-request-size=10MB ``` 3. 添加Controller 创建一个Controller来处理上传图片的请求: ```java @RestController @RequestMapping("/api") public class ImageUploadController { @PostMapping("/upload") public String uploadImage(@RequestParam("file") MultipartFile file) throws IOException { // 获取上传的文件名 String fileName = file.getOriginalFilename(); // 获取文件的后缀名 String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 生成文件名(使用UUID保证文件名唯一) String newFileName = UUID.randomUUID().toString() + suffixName; // 设置图片保存的路径 String filePath = "C:/uploads/"; // 创建文件对象 File dest = new File(filePath + newFileName); // 如果目录不存在就创建目录 if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } // 将上传的文件保存到目标路径下 file.transferTo(dest); // 返回图片的URL地址 return "/uploads/" + newFileName; } } ``` 4. 修改TinyMCE配置 在页面中引入TinyMCE,并设置上传图片的URL地址: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TinyMCE富文本编辑器</title> <script src="/webjars/tinymce/5.2.2/tinymce.min.js"></script> <script> tinymce.init({ selector: 'textarea', plugins: 'image', toolbar: 'image', images_upload_url: '/api/upload', images_upload_credentials: true, automatic_uploads: true }); </script> </head> <body> <textarea></textarea> </body> </html> ``` 5. 测试 启动应用,访问页面,在富文本编辑器中点击上传图片按钮,选择一张图片并上传。上传完成后,图片将会显示在编辑器中。同时,你可以在C:/uploads/目录下找到刚刚上传的图片。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜郎king

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值