springboot项目中引入editor并且解决上传图片的问题

一、页面中使用editor

①下载editor:https://pandao.github.io/editor.md/
②将下载的editor文件导入到项目之中

③在需要使用editor的页面中引入editormd.css文件，editormd.js文件以为editor还需要jquery的依赖，所以还需要额外引入jquery的依赖

<link rel="stylesheet" href="/static/editor.md/css/editormd.css">
<script src="/static/jquery/jquery-3.6.0.min.js"></script>
<script src="/static/editor.md/editormd.js"></script>

（以上代码只是示例，具体路径以项目为准）
④页面中定义自己editor编辑器需要放置的位置容器，并且在js代码中设置该容器的配置项，控制富文本编辑器的位置等信息

<div id="editor"></div>
<script type="text/javascript">$(function(){editormd('editor',{path:"/static/editor.md/lib",//项目中editor的lib目录地址width:'100%',//控制富文本编辑器的宽度height:640,//控制富文本编辑器的高度})})
</script>

此时项目启动，editor富文本编辑器就可以使用了

解决图片上传的问题

①此时的图片上传默认是不可以上传本地图片的如下图所示

想要解决能够上传本地的文件需要在页面配置中添加配置项

<script type="text/javascript">$(function(){editormd("editor",{path:"/static/editor.md/lib",width:"100%",height:640,imageUpload:true,//是否开启图片上传功能imageFormats:["jpg","jpeg","gif","png","bmp","webp"],//允许上传的图片格式imageUploadURL:"/upload"//图片上传之后的处理地址（需要自定义）})})
</script>

此时可以页面已经可以进行本地上传图片了

此时虽然可以进行本地上传但是上传后页面不会有任何反应，所以需要自己处理图片上传后的业务，包括图片的存储位置，已经需要的返回数据，该页面需要接收的返回数据是一种固定的形式：

{success : 0 | 1, //0表示上传失败;1表示上传成功message : "提示的信息",url     : "图片地址" //上传成功时才返回
}

后台处理该数据，因为是图片上传所以接收的应该是MultipartFile（MultipartFile是spring类型，代表HTML中form data方式上传的文件，包含二进制数据+文件名称）类型的数据。
处理代码如下：

@RequestMapping("/upload")
public void upload(HttpServletRequest request,HttpServletResponse response,@RequestParam("editormd-image-file")MultipartFile multipartFile)throw Exception{JSONObject jsonObject=new JSONObject();//可以理解为json格式的数据结构，可以使用put向对象中添加元素，可以很方便的在字符串和json格式之间转换。需要引入依赖fastjson//获取后缀名String originalName=multipartFile.getOriginalFilename();int index=originalName.lastIndexOf(".");String suffName=originalName.subString(index);//生成上传文件随机文件名SimpleDateFormat format=new SimpleDateFormat("yyyyMMdd_HHmmss");Random random=new Random();StringBuffer name=new StringBuffer();name.append(format(new Date())).append(random.nextInt(100)).append(suffName);//生成返回的URLString url=request.getScheme()+"://"+request.getServerName()+":"+request.getLocalPort()+request.getContextPath+"/upload/"+name.toString();//将上传的文件存储到服务器磁盘
try{File f1=new File("E:/upload/img/");File f2=new File("E:/upload/img/"+name.toString());if(!f1.exists()){f1.mkdirs();}multipartFile.transforTo(f1);jsonObject.put("url",url);jsonObject.put("message","success");jsonObject.put("success",1);
}catch(Expection e){e.printStackTrace();jsonObject.put("message","error");jsonObject.put("success",0);
}response.getWriter().write(jsonObject.toJSONString());
}

因为我将图片保存到了磁盘E盘的upload下的img文件夹之下，所以我们想要访问到该图片还需要在springmvc中配置虚拟地址的映射

@Configuration
public class WebConfig implements WebMvcconfigurer(){@Overridepublic void addResourceHandler(ResourceHandlerRegistery registery){registery.addResouceHandler("/upload/**").addRourceLocations("file:E://upload/img/");}
}

此时便可以通过返回给前台的url地址访问到保存进磁盘内的图片了

项目引入editormd并且解决上传图片的问题相关推荐

springboot项目引入图片_SpringBoot实现上传图片功能
1:首先在项目的pom文件中添加两个依赖 commons-fileupload commons-fileupload 1.3.1 net.coobird thumbnailator 0.4.8 2:r ...
(转)通过maven，给没有pom文件的jar包生成pom文件，maven项目引入本地jar包
文章完全转载自 : https://blog.csdn.net/qq_31289187/article/details/81117478 问题一: 经常遇到公司私服或者中央仓库没有的jar包,然后通过 ...
vue项目中使用lib-flexible解决移动端适配
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flex ...
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
前言为什么要使用阿里图标库: 图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...
使用idea和go mod 管理go项目代码飘红解决方法
问题描述:使用idea来编辑go项目,但是不小心删除了一下idea配置中的GO PATH 中的一个选项导致项目引入的第三方依赖一直飘红. 解决方法:这里就不说怎么去在idea中集成go了网上有很多教程 ...
maven项目依赖报红解决办法
maven项目依赖报红解决办法检查情况一: pom文件不报红,maven依赖爆红. 情况二: pom文件dependency项报红. 检查首先检查pom文件引入依赖代码是否有误,在确认代码无误的 ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
H5（nuxt）项目引入字体
H5(nuxt)项目引入字体闲话少说方法1: 1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.先自己定义一个font.css文件,字体文件的路径引入 @font-face ...
uni-app 项目引入第三方js插件，单个js文件引入成功，调用该插件方法
通过"vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)"成功移到UNI-APP上方法一: 引用网址:https://www.cnblogs. ...

项目引入editormd并且解决上传图片的问题

springboot项目中引入editor并且解决上传图片的问题

一、页面中使用editor

解决图片上传的问题

项目引入editormd并且解决上传图片的问题相关推荐

最新文章

热门文章