业界动态
ueditor java 上传_Java往事之《百度UEditor插件配置图片上传问题》
2024-12-05 18:00

百度UEditor插件配置图片上传问题

ueditor java 上传_Java往事之《百度UEditor插件配置图片上传问题》

前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的。然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2

7678e74df2d986c0e255fe01a6170fdd.png

图1

017b171f2c6ae3687a157f9b000a338a.png

图2

很好!下面看一下如何解决这个问题。

1.首先你可以到官网Ueditor,查看很详细的文档,包括如何安装到Eclipse,相关jar包和如何使用Ueditor,本文主要介绍如何实现单图片上传

2.把WEB-INF/jsp/src下的java源码copy到项目源码中,方便之后的调试代码,如下图

2c6a8d751058629881874c7a6ba22367.png

这里我可以写一些输入提示

UE.getEditor('myEditor',{

//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个

toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','test']],

//focus时自动清空初始化时的内容

autoClearinitialContent:true,

//关闭字数统计

wordCount:false,

//关闭elementPath

elementPathEnabled:false,

//默认的编辑区域高度

initialframeHeight:300

//更多其他参数,请参考ueditor.config.js中的配置项

})

上面例子很简单,就是如何初始化一个富文本框,已经如何配置工具条等等

4.因为我们要实现图片上传功能,所有要把图片上传按钮搞上去,方法如下:

1)第一种方法:把simpleupload加到toolbars中:

toolbars:[['FullScreen',simpleupload ,'Source', 'Undo', 'Redo','Bold','test']]

2)第二种方法:直接把toolbars注释掉

这时就会读取默认的配置文件ueditor.config.js,下面介绍,不过会把所有的按钮全部显示出来

如下图

2d5fbc553acb7ee51139095b6d8799ce.png

5.这时你就会发现,我之前遭遇的奇葩事情发生了,点击图片上传按钮,一点反应都没有,如果你鼠标点了一下输入框,按钮还给置灰了

这里开始介绍ueditor.config.js文件

首先,你会发现在这个文件可以配置很多,具体看下面即可

f956dec4c6ee47cbd5e053cffd130aeb.png

重点讲:serverUrl: URL + “PHP/controller.php”,这个就是请求后端的统一接口路径,记得是统一接口路径,也就是说只有这个路径,没有第二个。

我们把路径改成jsp的:, serverUrl: URL + “jsp/controller.jsp”

我们把注释去掉,重新启动tomcat,刷新页面,点击图片上传按钮

79a654a4038f06e31722e83cc329a2eb.png

看完上面这个图,是不是感觉成功了,哈哈哈哈.....并没有!是不是很坑大表弟?看下图,选完图片的效果

faee89bf7093fa1d422c7658fe747813.png

大家可以看到图片没有正常显示出来,人家官网可是能看到图的。还能不能愉快的玩耍了

6.说明还有些配置文件还没配好,我们看刚刚配置的后端请求路径

// 服务器统一请求接口路径

, serverUrl: URL + "jsp/controller.jsp"

记住,大家要把这个文件当作后端的java文件,一定要记住,很重要的。

controller.jsp会返回同目录下的config.json文件,大家要把它当作是后端返回的数据即可

这时,我们先看config.json文件:

只看部分配置,下面的配置都很重要,但我们先解决上面出现的问题

上面的问题应该是图片的路径不对造成的,所以我们修改配置:imageUrlPrefix,把他改成下面的配置,重启,刷新

"imageUrlPrefix" = http://localhost:8082/testUEditor/

6a518501f8b1aca2fd3635116d12740b.png

重新访问一下,效果如下图

    以上就是本篇文章【ueditor java 上传_Java往事之《百度UEditor插件配置图片上传问题》】的全部内容了,欢迎阅览 ! 文章地址:http://sicmodule.glev.cn/news/12092.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 歌乐夫资讯移动站 http://sicmodule.glev.cn/mobile/ , 查看更多   
最新新闻
京东改手机号(京东改手机号码)
  关于《京东改手机号》的指南  随着互联网的普及和电子商务的飞速发展,京东作为中国最大的电商平台之一,吸引了众多用户的
手机唤醒功能(手机唤醒功能在哪)
  文章标题:《手机唤醒功能:科技之光唤醒生活的便捷性》  随着科技的飞速发展,智能手机已经成为了我们日常生活中不可或缺
手机用什么p图软件(手机用什么p图软件不压缩)
  手机用什么P图软件?全面解析当下最热门的移动修图工具  随着智能手机的普及,人们对照片的美观度要求越来越高。因此,各
手机架怎么折(手机架怎么折视频教程)
  标题:《手把手教你折出实用的手机架》  在当今时代,手机已成为我们日常生活中不可或缺的伴侣。随着手机的普及,手机架也
手机内存空间不足怎么清理(手机内存空间不足,建议清理)
  关于《手机内存空间不足怎么清理》的文章  随着智能手机的普及,我们的手机中存储的信息越来越多,无论是工作文件、照片、
手机场景图(手机场景服务在哪里)
  关于《手机场景图》的文章  随着智能手机的普及,我们的生活越来越离不开手机。在日常生活中,我们会用手机拍摄各种场景,
手机没电了打电话提示什么(手机没电了打过去会提示什么)
  文章标题:《手机没电了打电话提示什么》  在这个科技日新月异的时代,手机已成为我们日常生活中不可或缺的一部分。然而,
手机没充满电拔了对手机有坏处吗(手机充电中途拔掉会影响手机吗)
  关于《手机没充满电拔了对手机有坏处吗》的探讨  随着科技的飞速发展,智能手机已成为我们日常生活中不可或缺的伙伴。与此
华为手机图案解锁(华为手机图案解锁设置不见了)
  华为手机图案解锁:一种直观且便捷的安全方式  随着科技的进步和智能手机的普及,手机安全成为人们日益关心的问题。在众多
天马手机屏幕(天马手机屏幕寿命)
  天马手机屏幕:技术与艺术的完美结合  在当今智能手机市场,天马手机屏幕以其卓越的品质和技术创新赢得了广大消费者的青睐