将Ueditor编辑器添加入javaweb项目

jsp页面获取并显示Ueditor内容

1.首先下载Ueditor:官网地址
在这里插入图片描述
下载【1.4.3.3jsp版本】 UTF-8版(有的浏览器可能下载的非常慢,是非常非常慢,进度条基本不动的那种,可以试试用手机浏览器下)

压缩包下载后,解压
在这里插入图片描述
2.打开eclipse,新建一个动态web项目
在这里插入图片描述
建好工程后,将解压好的utf8-jsp文件夹复制到WebContent文件夹下
在这里插入图片描述
在这里插入图片描述
导入后工程会报错,此时需要将utf8-jsp文件夹下的jsp文件夹下的lib文件夹下的jar包复制一份到WEB-INF文件夹下的lib文件夹中去
在这里插入图片描述
但此时jsp文件夹下的config.json文件的第一排可能会报错(有些会出现乱码问题,本文末会提供一份config.json文件,以便解决)

在这里插入图片描述
打开window–>Perference,找到Validation,将JSON validator取消勾选。
在这里插入图片描述
在这里插入图片描述

3.你可以将解压的utf8-jsp文件夹中的index.html直接复制到eclipse中,将后缀改为jsp,加上以下代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

也可以新建一个jsp文件将index.html中的内容复制过去。

4.文件建好后,需要引入

	<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

注意更改以下路径,否则运行后无法显示文本编辑框
在这里插入图片描述
结构和本文一样,可参考路径
在这里插入图片描述
初始化编辑器

<script type="text/javascript">
    var ue = UE.getEditor('editor');
</script>

调用编辑器

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

运行结果:
在这里插入图片描述
现在无法上传图片
需要修改config.json和ueditor.config.js文件
config.json文件修改如下,“imageUrlPrefix”: 一般改为项目名即可,“imagePathFormat”:可参照图中路径
在这里插入图片描述
ueditor.config.js文件中加上window.UEDITOR_HOME_URL="/Case/utf8-jsp/";项目名/编辑器路径。
注意以上修改不要漏掉 /。
在这里插入图片描述
然后就可以上传图片
单图上传
在这里插入图片描述
多图上传
在这里插入图片描述
如果仍有问题可留言评论,尽量帮助解决
学习中,欢迎交流

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UEditor编辑器存在一个高危漏洞,即在抓取远程数据源时未对文件后缀名做验证,导致任意文件写漏洞。黑客可以利用这个漏洞,在服务器上执行任意指令。这个漏洞只影响.NET版本的UEditor,其他版本暂时不受影响。 为了利用这个漏洞,黑客可以在UEditor编辑器中的shell地址处填写服务器上的图片马地址,构造成特定格式。例如,在URL中将图片马地址后缀更改为.aspx,绕过上传使其解析为aspx文件,从而达到任意文件上传的目的。 为了防止这个漏洞被利用,建议开发者及时更新UEditor编辑器的最新版本,并确保在抓取远程数据源时对文件后缀名进行验证。此外,也可以限制用户上传的文件类型和大小,加强服务器的安全配置,以减少潜在的风险。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Ueditor编辑器任意文件上传漏洞](https://blog.csdn.net/m0_51468027/article/details/126077427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Django集成百度富文本编辑器uEditor攻略](https://download.csdn.net/download/weixin_38613154/14865210)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值