SpringBoot+Editormd实现markdown文本编辑和图片上传

富文本编辑是开发过程中常用的功能之一，而markdown是开发人员最亲睐的编辑格式，此刻，我也正在使用CSDN的markdown编辑器进行编辑。刚好有了一些想法，所以实现了这个功能。

Markdown文本编辑功能实现

Editormd项目地址,Editormd的基本实现非常简单，只需要在html中引入必要的css文件（此处使用了thymeleaf）

    <meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Edit</title><link rel="stylesheet" th:href="@{/css/style.css}"href="/css/style.css"/><link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"href="/editormd/css/editormd.css"/><link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>

在html中写上两个带有明确class：editormd-markdown-textarea和editormd-html-textarea的标签

<div class="editormd" id="test-editormd"><textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" id="content"></textarea><!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 --><textarea class="editormd-html-textarea" name="editormd-html-textarea" id="htmlContent"></textarea>
</div>

最后我们进行引入js后进行初始化操作即可

<script th:src="@{/js/jquery.min.js}" src="/js/jquery.min.js"></script>
<script th:src="@{/editormd/js/editormd.js}" src="/editormd/js/editormd.js"></script>
<script type="text/javascript">$(function() {editormd("test-editormd", {width   : "90%",height  : 640,syncScrolling : "single",//你的lib目录的路径，我这边用JSP做测试的tocm : true, // Using [TOCM]tex : true, // 开启科学公式TeX语言支持，默认关闭flowChart : true, // 开启流程图支持，默认关闭path    : "/editormd/lib/",//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。saveHTMLToTextarea : true});});

此时我们在后台中写添加

    @RequestMapping("edit")public String   editor(){return "edit";}

可见如下效果

当我们添加基本的java对象并且在html中添加按钮之后我们就可以将数据传递到后台了。

 @Id // 主键@GeneratedValue(strategy = GenerationType.IDENTITY) // 自增长策略private Long id; // 用户的唯一标识//@NotEmpty(message = "标题不能为空")@Column(nullable = false, length = 50) // 映射为字段，值不能为空private String title;//@NotEmpty(message = "摘要不能为空")@Column(nullable = false) // 映射为字段，值不能为空private String summary;@Lob  // 大对象，映射 MySQL 的 Long Text 类型//@NotEmpty(message = "内容不能为空")@Column(nullable = false) // 映射为字段，值不能为空private String content;@Lob  // 大对象，映射 MySQL 的 Long Text 类型//@NotEmpty(message = "内容不能为空")@Column(nullable = false) // 映射为字段，值不能为空private String htmlContent; // 将 md 转为 htmlpublic Long getId() {return id;}//省略get，set方法

js中添加

     $("#submitBtn").click(function () {alert("点击按钮了");submitblog();})function submitblog() {var  title = $("#title").val();var content = $("#content").val();var htmlContent = $("#htmlContent").val();$.ajax({url: "submit",data: {title: title, content:content,htmlContent:htmlContent},success:function () {alert("发布成功");},error:function () {alert("发布失败");}})}

Controller中添加接受方法

    @RequestMapping("submit")@ResponseBodypublic void    submit(Blog blog){System.out.println(blog.getContent());System.out.println(blog.getHtmlContent());blogRepository.save(blog);}

即可保存

实现文本上传功能

前端实现

Editormd的文本上传功能在前端的实现也非常简单，只需要在前端js初始化的代码中加入

            imageUpload : true,imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],imageUploadURL : "/uploadimg",onload: function () {//console.log('onload', this);//this.fullscreen();//this.unwatch();//this.watch().fullscreen();this.width("100%");this.height(480);//this.resize("100%", 640);}

onload方法为上传图片的回调方法，可以在这里设置图片的一些属性
但是实际测试过程中，发现这些属性并没有什么作用，网上也没有对应的例子。因此，这一步需要好好探究

后端实现

    @RequestMapping(value="/uploadimg")public @ResponseBody Map<String,Object> demo(@RequestParam(value = "editormd-image-file", required = false) MultipartFile file, HttpServletRequest request) {Map<String,Object> resultMap = new HashMap<String,Object>();System.out.println(request.getContextPath());String realPath = UPLOADED_FOLDER;String fileName = file.getOriginalFilename();System.out.println(fileName);
/*        File targetFile = new File(realPath, fileName);if(!targetFile.exists()){targetFile.mkdirs();}*///保存try {
/*            file.transferTo(targetFile);*/byte[] bytes = file.getBytes();Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());Files.write(path, bytes);resultMap.put("success", 1);resultMap.put("message", "上传成功！");resultMap.put("url",UPLOADED_FOLDER+fileName);} catch (Exception e) {resultMap.put("success", 0);resultMap.put("message", "上传失败！");e.printStackTrace();}System.out.println(resultMap.get("success"));return resultMap;}

此处有两个需要注意的点

由于SpringBoot自带的Tomcat的原因，导致图片无法上传到项目目录下，自带的Tomcat的临时目录的存取权限有问题，因此此处我们使用了一个指定目录
Editormd前端规定了后台必须返回给前端一个map且形式为{“success”:1,message:”上传成功”,”url”:url}，这里需要注意一下。
其次，使用简单的file文件写入也许会存在问题，因此，我们这里采用了NIO的写入方式

           byte[] bytes = file.getBytes();Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());Files.write(path, bytes);

代码地址

SpringBoot+Editormd实现markdown文本编辑和图片上传相关推荐

Gitee+typora+picgo+插件，markdown图床配置，一键将markdown中本地图片上传至图床
一键将markdown中本地图片上传至图床推荐配置:Gitee+typora+picgo+插件文章目录安装 picgo 配置 typora 配置 Gitee 图床配置图床设置配置 typor ...
springboot+vue+element+七牛云+实现图片上传功能
注册七牛云链接地址: https://www.qiniu.com/products/kodo,免费有10G空间与免费一个月的域名地址注册后,开启对象存储,创建空间选择地区, 上传方式: 1:前端现将 ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
Springboot集成七牛云，实现图片上传功能
七牛云的使用 1.进入官网,注册一个账号 2.找到对象存储 3.新建存储空间 4.管理存储空间 5.到此基本操作就完成了,接下来我们要在项目中使用方式一:官方的帮助文档,很详细: 步骤一:找到开发者 ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
vue项目引入富文本编辑，图片上传/视频上传
1:下载富文本和更改图片大小 npm install quill-image-resize-module --save//更改img图片大小 npm install vue-quill-editor ...
WangEditor实现富文本编辑和图片上传
1.首先第一步是下载压缩文件,去官网下载http://www.wangeditor.com/ 2.解压文件,然后将文件夹放到webapp下面,如图所示: 3.编写html页面,在页面中构造编辑器 &l ...
SpringBoot 中的验证码、二维码、缩略图、图片上传、定时器调度
1.验证码生成 pom.xml 文件中添加依赖: <dependency><groupId>com.github.penggle</groupId><arti ...
SpringBoot + Vue 前后端分离（用户信息更新头像上传Markdown图片上传）
文章目录前言用户信息更新前端发送后端接口修改用户头像前端前端图片显示图片上传完整代码后端代码图片存储图片上传工具类图片工具类的配置工具类实现效果 Markdown 图片 ...
SpringBoot 2.0 多图片上传加回显
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...