jsp百度富文本框ueditor的使用及上传图片至本地并回显

最新推荐文章于 2021-05-17 15:03:48 发布

脚上没穿鞋，舒服~~

最新推荐文章于 2021-05-17 15:03:48 发布

阅读量2.1k

点赞数 1

文章标签： javascript html web tomcat

本文链接：https://blog.youkuaiyun.com/qq_49729497/article/details/112977105

版权

本文介绍了在JSP项目中如何集成和配置UEditor富文本编辑器，包括将编辑器引入项目、配置工具栏、设置图片上传路径。通过修改UEditor的配置文件和后端代码，实现了图片上传到本地磁盘并使用Tomcat模拟路径回显。详细步骤包括修改config.json、调整BinaryUploader.java以及ueditor.all.js和image.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**说明：**其实现在大家开发前端已经基本不用jsp这种方式了，所以这个应该很少人能用得到，但是还是很希望下述内容可以帮助到有此方面需求的老师。这是当时在刚工作时用到的，就是将当时总结好的发出来，里面有引用到其他老师写的内容，但是找不到当时的文章了，所以如果有老师看到可提醒我，将原文章地址加上，谢谢。

1、自行从官网下载JSP Ueditor安装包，将下载好的安装包减压放入项目工程中的webapp下，如图所示：
在这里单独插入图片描述
2、将jsp目录下的jar报放置在WEB-INF的lib目录下，如图所示：
在这里插入图片描述
3、将富文本框引入到项目中，可以参考ueditor目录下的index.html，将相应代码嵌入你的界面，并初始化（切记一定得引入相应的js）
实例化编辑器：var ue = UE.getEditor(‘editor’,{});

4、这个时候富文本编辑器就可以使用了，对于编辑器中的工具栏的配置：（可配置再实例化编辑器的代码中）

toolbars: [
    [
        'anchor', //锚点
        'undo', //撤销
        'redo', //重做
        'bold', //加粗
        'indent', //首行缩进
        'snapscreen', //截图
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'fontborder', //字符边框
        'superscript', //上标
        'formatmatch', //格式刷
        'source', //源代码
        'blockquote', //引用
        'pasteplain', //纯文本粘贴模式
        'selectall', //全选
        '