接上一篇：SpringBoot整合Editor.md实现Markdown编辑器
https://blog.csdn.net/weixin_40816738/article/details/103160267

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件）,基于 CodeMirror、jQuery 和 Marked 构建。

文章目录

一、地址部署
二、集成流程
- 1. 下载插件
- 2. 解压目录结构
- 3. 配置Editor.md
- 4. 配置编辑器
- 5. 初始化编辑器
- 6. 访问地址
- 7. 效果如下
- 8. 图片上传
- 9. 文件预览

一、地址部署

预览地址	http://localhost/editorWeb/preview/{id}
编辑地址	http://localhost/editorWeb/edit/{id}
博客地址	https://blog.csdn.net/weixin_40816738/article/details/103160267
Github 下载	https://github.com/gb-heima/editor-markdown

二、集成流程

1. 下载插件

项目地址：Editor.md

2. 解压目录结构

3. 配置Editor.md

将exapmles文件夹中的simple.html放置到项目中，并配置对应的css和js文件

4. 配置编辑器

......<script src="${re.contextPath}/jquery.min.js"></script><script src="${re.contextPath}/editor/editormd.min.js"></script><link rel="stylesheet" href="${re.contextPath}/editor/css/style.css"/><link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css"/><link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
......
<!-- 存放源文件用于编辑 --><textarea style="display:none;" id="textContent" name="textContent">
</textarea><!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 --><textarea id="text" class="editormd-html-textarea" name="text"></textarea></div>

5. 初始化编辑器

var testEditor;$(function () {testEditor = editormd("test-editormd", {width: "90%",height: 640,syncScrolling: "single",path: "${re.contextPath}/editor/lib/",imageUpload: true,imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL: "/file",//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。saveHTMLToTextarea: true// previewTheme : "dark"});});

6. 访问地址

http://localhost/

7. 效果如下

这样就实现了最简单的editor.md编辑器！！！

8. 图片上传

由于在初始化编辑器中配置的图片上传地址为imageUploadURL: “/file”,，与之对应，我们在/file处理文件上传即可

@RestController
@RequestMapping("/file")
@Slf4j
public class FileController {//    @Value("")
//    String folder = System.getProperty("user.dir")+File.separator+"upload"+File.separator;/*** 在配置文件中配置的文件保存路径*/@Value("${img.location}")private String folder;@PostMappingpublic FileInfo upload(HttpServletRequest request, @RequestParam(value = "editormd-image-file", required = false) MultipartFile file) throws Exception {log.info("【FileController】 fileName={},fileOrginNmae={},fileSize={}", file.getName(), file.getOriginalFilename(), file.getSize());log.info(request.getContextPath());String fileName = file.getOriginalFilename();String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);String newFileName = new Date().getTime() + "." + suffix;File localFile = new File(folder, newFileName);file.transferTo(localFile);log.info(localFile.getAbsolutePath());return new FileInfo(1, "上传成功", request.getRequestURL().substring(0,request.getRequestURL().lastIndexOf("/"))+"/upload/"+newFileName);}@GetMapping("/{id}")public void downLoad(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) {try (InputStream inputStream = new FileInputStream(new File(folder, id + ".txt"));OutputStream outputStream = response.getOutputStream();) {response.setContentType("application/x-download");response.setHeader("Content-Disposition", "attachment;filename=test.txt");IOUtils.copy(inputStream, outputStream);outputStream.flush();} catch (Exception e) {}}
}

9. 文件预览

表单POST提交时，editor.md将我们的markdown语法文档翻译成了HTML语言，并将html字符串提交给了我们的后台，后台将这些HTML字符串持久化到数据库中。具体在页面显示做法如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"/><title>Editor.md examples</title><link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.preview.min.css" /><link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css"/>
</head>
<body>
<!-- 因为我们使用了dark主题，所以在容器div上加上dark的主题类，实现我们自定义的代码样式 -->
<div class="content editormd-preview-theme" id="content">${editor.content!''}</div>
<script src="${re.contextPath}/jquery.min.js"></script>
<script src="${re.contextPath}/editor/lib/marked.min.js"></script>
<script src="${re.contextPath}/editor/lib/prettify.min.js"></script>
<script src="${re.contextPath}/editor/editormd.min.js"></script>
<script type="text/javascript">editormd.markdownToHTML("content");
</script>
</body>
</html>

预览地址	http://localhost/editorWeb/preview/{id}
编辑地址	http://localhost/editorWeb/edit/{id}
博客地址	https://blog.csdn.net/weixin_40816738/article/details/103160267
Github 下载	https://github.com/gb-heima/editor-markdown

SpringBoot集成Editor.md 流程详细相关推荐

SpringBoot整合Editor.md实现Markdown编辑器
Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建. 文章目录一.技术选型及分支部署二.集成手册 2 ...
SpringBoot集成163邮件发送详细配置，从163邮箱开始配置
SpringBoot集成163邮件发送详细配置,从163邮箱开始配置 1.登录163邮箱 2.配置163邮箱 3.开始编写SpringBoot代码 1.创建SpringBoot项目然后引入依赖 2.编 ...
解决集成 editor.md编辑器时，报 editormd is not defined的解决办法
这是我在springboot中整合editor.md编辑器之后出现的问题解决办法: jquery的依赖需要放在最前面,因为这个Markdown编辑器是依赖jQuery的
springboot集成mqtt(超级无敌详细)
springboot集成MQTT步骤 1. 引入pom依赖 <dependency><groupId>org.springframewor ...
VUE3集成Markdown编辑器（http://editor.md.ipandao.com/）
目录背景信息 Editor.md是2015年开源的项目,那时还没有VUE3版本,所以网上也较少VUE3集成Editor.md的示例.不过还是有些大牛分享了集成的方法. 集成方法 1.下载和安装edi ...
SpringBoot集成支付宝沙箱手机网站支付详细流程和踩坑分享
描述本文主要讲解SpringBoot集成支付宝沙箱手机网站支付,即网页点击按钮发起支付,跳转到沙箱app付款由于其他博客的流程大多笼统,有时候并不能找到正确的集成方式,本文尽可能详细的阐述付款,异 ...
SpringBoot集成MyBatis-Plus框架详细方法
1.说明本文详细介绍Spring Boot集成MyBatis-Plus框架的方法, 使用MySQL数据库进行测试, 包括完整的开发到测试步骤, 从一开始的Spring Boot工程创建, 到MySQ ...
Activiti 快速入门教程：SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化
Activiti 快速入门教程:SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化 7大服务与核心表 23张表概览 7大核心服务(重要) 加依赖内部 ...
springboot集成swagger2多模块中文配置详细步骤，解决集成mybatis或mybatis-plus无法正常使用问题
springboot集成swagger2多模块中文配置详细步骤,解决集成mybatis或mybatis-plus无法正常使用问题参考文章: (1)springboot集成swagger2多模块中文配 ...

SpringBoot集成Editor.md 流程详细