當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

SpringBoot集成Editor.md 流程详细

發布時間：2024/9/27 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><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>  <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 流程详细的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： tomcat不重启java文件自动编译
下一篇： jdk 安装 linux环境