SpringBoot集成Editor.md 流程详细

接上一篇: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/522720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学阿里中台,80%的人只学到了皮毛!揭秘阿里中台的12个架构思维和原则

戳蓝字“CSDN云计算”关注我们哦&#xff01;来源 | 阿里技术官方公众号&#xff08;ali_tech&#xff09;作者|九摩/阿里技术专家许多企业都忙于学习阿里的中台系统&#xff0c;想通过中台系统&#xff0c;解决企业当前的痛点&#xff0c;如&#xff1a;架构耦合度高、模块复用…

cx_Oracle怎么打包,cx_Oracle 在执行包文件 function 时有多个出参该如何获取

oracle 数据库 包文件这样创建的function pf_get_info(id in varchar2,name out varchar2,sex out varchar2,birthdate out date,cd_no out varchar2) return integer ise_info_no_found exception;beginbeginselect name,decode(sex, 0, 男, 1, 女, 未知),birthdate,nvl(cpr_n…

MaxCompute预付费资源监控工具-CU管家使用教程

摘要&#xff1a; MaxCompute管家使用前提 1、用户购买了 MaxCompute 预付费CU资源&#xff0c;60CU以上的用户&#xff08;备注&#xff1a;CU过小无法发挥计算资源及管家的优势&#xff09;。 2、支持区域&#xff0c;MaxCompute 华北2北京、华东2上海、华南1深圳 3个Region的…

SpringBoot2.x 整合websocket 消息推送,单独发送信息,群发信息

根据公司需求在SpringBoot项目中集成站内信&#xff0c;于是&#xff0c;我做了一个SpringBoot2.x 整合websocket 消息推送&#xff0c;给指定用户发送信息和群发信息即点点对方式和广播方式2种模式。 文章目录一、地址部署总览二、实战需求案例三、实战准备3.1. pom依赖3.2. a…

Spark精华问答 | 为什么要学Spark?

戳蓝字“CSDN云计算”关注我们哦&#xff01;为什么要学习Spark&#xff1f;作为一个用来实现快速而通用的集群计算的平台。扩展广泛使用的MapReduce计算模型&#xff0c;而且高效地支持更多的计算模式&#xff0c;包括交互式查询和流处理。Spark的一个重要特点就是能够在内存中…

oracle导入dmp清除之前,oracle导入dmp遇到的有关问题

oracle导入dmp遇到的问题一、 首先要明白&#xff0c;导入导出dmp文件是通过cmd命令执行的&#xff0c;而不是通过SQL plus执行的.此外也可以借助PLSQLDev工具进行导入导出记得“导出可执行文件”选择客户端安装好的bin下的exp.exe工具二、发现在导出的过程有问题&#xff1a;网…

每个人都应该知道的25个大数据术语

摘要&#xff1a; 如果你初来乍到&#xff0c;大数据看起来很吓人!根据你掌握的基本理论&#xff0c;让我们专注于一些关键术语以此给你的约会对象、老板、家人或者任何一个人带来深刻的印象。 让我们开始吧&#xff1a; 1.算法。“算法”如何与大数据相关?即使算法是一个通用…

开发经验分享_04_快速熟悉程序(思路)

接上一篇&#xff1a;(企业内部)开发经验分享_03_解决问题3步走(思路) https://gblfy.blog.csdn.net/article/details/103414474 文章目录一、明确组件布局1. 页面布局2. 后端布局3. 明确位置坐标&#xff0c;再上路二、映射有度1. 前和后2. 思路和现实3. 对对碰三、知悉意/系1…

【个推CTO谈数据智能】之本质及技术体系要求

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者|安森来源|个推技术学院安森&#xff0c;个推CTO毕业于浙江大学&#xff0c;现全面负责个推技术选型、研发创新、运维管理等工作&#xff0c;已带领团队开发出针对移动互联网、金融风控等行业的多项前沿数据智能解决方案。曾任M…

oracle11管理员连接数据库,1.运行 cmd.exe;2.输入 sqlplus / as sysdba,以系统管理员(sysdba)身份连接数据库,进行数据库管理操作。3.连接成功后执...

1.运行 cmd.exe&#xff1b;2.输入 sqlplus / as sysdba,以系统管理员(sysdba)身份连接数据库&#xff0c;进行数据库管理操作。3.连接成功后执行alter user identityName identified by password; —–修改密码alter user identityName account unlock; —–解锁alter user id…

企业打开Redis的正确方式,来自阿里云云数据库团队的解读

摘要&#xff1a; Redis是开源的基于内存且可以持久化的分布式 Key – Value数据库。自2009年发布最初版本以来&#xff0c;Redis的热度只增不减&#xff0c;除了经常位居DB-Engines的最受欢迎Key-Value数据库榜首之外&#xff0c;看阿里云技术总监为您深度解读云数据库Redis。…

2019 年度程序员吸金榜:你排第几?

作为全球知名招聘求职网站Indeed&#xff0c;最近发布了2019年度最佳工作榜单&#xff0c;公布了2019年的行业领域及工作岗位薪酬&#xff0c;在全行业的榜单中&#xff0c;跟程序员相关的岗位有9个&#xff01;对此&#xff0c;大家纷纷留言表示程序员或成最大赢家&#xff01…

[ERR] 1227 - Access denied; you need (at least one of) the SUPER privilege

错误二&#xff1a;[ERR] 1227 - Access denied; you need (at least one of) the SUPER privilege… 觖决办法 用文本工具打开sql文件 查找&#xff1a; DEFINER fit_root% 把fit_root%账号改成你实际导入的那台服务器mysql账号保存即可

oracle database 11g plsql 程序设计,oracle-database-11g-plsql-编程实战笔记

Chap1DML语句是select 、insert、update、delete和mergeDDL语句是create、alter、drop、rename、truncate、commentDCL语句是grant、revokeTCL语句是commit、rollback和savepointsql16个基本命令——参考书《OCA认证考试指南(IZ0-051)》清华大学出版社《oracle database sql la…

YAFFS2移植到AliOS Things指南

摘要&#xff1a; YAFFS2介绍 YAFFS&#xff08;Yet Another Flash File System&#xff09;是第一个专门为NAND Flash存储器设计的嵌入式文件系统&#xff0c;适用于大容量的存储设备。YAFFS 是基于日志的文件系统&#xff0c;提供磨损平衡和掉电恢复的健壮性。 点此查看原文&…

Error querying database. Cause: java.lang.IllegalArgumentException:Failed to decrypt. 错误解决方案

java.lang.IllegalArgumentException:Failed to decrypt 从错误可以看出&#xff0c;解密失败。 原因是你在数据库连接配置的地方&#xff0c;设置了加密。即: config.decrypttrue将其改成&#xff1a; config.decryptfalse问题就可以解决。

阿里云十年,从去“IOE”到引领云原生浪潮

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 孙浩峰出品 | CSDN云计算&#xff08;ID&#xff1a;CSDNcloud&#xff09;2008年&#xff0c;王坚从微软亚洲技术研究院空降阿里&#xff0c;担任首席架构师。这个在阿里内部尊称为“博士”的首席架构师所学却是一个心理学博…

linux下mtr命令,如何使用Linux mtr命令

对于经常和Linux打交道的技术人员来说&#xff0c;mtr命令是一个非常实用的Linux命令。它可以进行实时网络诊断。本篇文章分享了linux mtr命令的详细使用示例。以下描述来自mtr命令的软件包信息。Mtr是一种网络诊断工具&#xff0c;将ping和traceroute组合到一个程序中。Mtr提供…

IntelliJ IDEA 单行注释调整

部分人并不习惯这种风格&#xff0c;所以一般会设置为单行注释的两个斜杠跟随在代码的头部&#xff0c;在File -> Setting -> Editor -> Code Style -> Java -> Code Generation 下如图设置即可

高速通道-冗余物理专线接入-健康检查配置

摘要&#xff1a; 组建混合云&#xff0c;用户的IDC需要通过物理专线与阿里云VPC互通&#xff0c;多线冗余是基本配置需求。阿里云提供的冗余冗余切换方案是在VPC中&#xff0c;用户掌握切换原理&#xff0c;即可自主在控制台完成冗余负载配置。 一 VPC健康检查IP机制1 健康检查…