Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式。
前言
Editor.md 是一款開源的、可嵌入的Markdown 在線編輯器（組件），基於CodeMirror、jQuery 和Marked 構建。本章將使用SpringBoot整合Editor.md構建Markdown編輯器。
下載插件
項目地址：Editor.md
解壓目錄結構：
配置Editor.md
將exapmles文件夾中的simple.html放置到項目中，並配置對應的css和js文件
配置編輯器
...... <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" rel="external nofollow" /> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" /> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" rel="external nofollow" type="image/x-icon"/>......<!-- 存放源文件用於編輯--> <textarea style="display:none;" id="textContent" name="textContent"></textarea> <!-- 第二個隱藏文本域，用來構造生成的HTML代碼，方便表單POST提交，這裡的name可以任意取，後台接受時以這個name鍵為準--> <textarea id="text" name="text"></textarea> </div>初始化編輯器
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" }); });這樣就實現了最簡單的editor.md編輯器，效果如下：
訪問地址：http://localhost:8080/
圖片上傳
由於在初始化編輯器中配置的圖片上傳地址為imageUploadURL: "/file",，與之對應，我們在/file處理文件上傳即可
@RestController@RequestMapping("/file")@Slf4jpublic class FileController {// @Value("")// String folder = System.getProperty("user.dir")+File.separator+"upload"+File.separator; /** * 在配置文件中配置的文件保存路徑*/ @Value("${img.location}") private String folder; @PostMapping public 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) { } }}文件預覽
表單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" rel="external nofollow" /> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" /></head><body><!-- 因為我們使用了dark主題，所以在容器div上加上dark的主題類，實現我們自定義的代碼樣式--><div 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:8080/editorWeb/preview/{id}
編輯地址：http://localhost:8080/editorWeb/edit/{id}
代碼下載
從我的github 中下載，https://github.com/longfeizheng/editor-markdown
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。