文档编辑器与远端文件存储(Summernote)

本文档介绍了如何使用Summernote编辑器在Spring Boot项目中实现图片上传到服务器,并返回图片虚拟地址。步骤包括创建项目、导入Summernote插件、配置编辑器、设置回调函数onImageUpload处理图片上传,以及在后台处理存储图片并配置虚拟映射路径。最终实现了在编辑器中上传图片并以链接形式展示。
摘要由CSDN通过智能技术生成
                                         文档编辑器与远端文件存储

summernote编辑器实现图片上传服务器并返回图片虚拟地址
具体步骤如下:
1、在STS中创建spring boot项目,设置其项目结构为project explorer
2、到summernote下载summernote插件
在这里插入图片描述
解压后,其目录结构如下:
在这里插入图片描述
summernote编辑器最重要的插件基本都在dist文件中
3、在spring boot项目中的webapp目录下导入summernote插件:(点击webapp右键->import->点击File System->在from directory浏览summernote插件地址并添加->勾选添加的文件->完成操作)
在这里插入图片描述
4、将其中的index.html文件修改为index.jsp,并在index.jsp中引用summernote.css和summernote.js文件,以及bookstrap
文件:
在这里插入图片描述
接下来在body中添加div容器

<div id="summernote">Hello Summernote</div>

接着在index.jsp中对summernote进行初始化

 $(document).ready(function() {
    	$('#summernote').summernote();
    });

插入图片的时候,Summernote组件默认是将图片以二进制形式展示的,如果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值