SpringBoot使用Editor.md構建Markdown富文本編輯器

時間 2019-12-06

標籤 springboot 使用 editor.md editor 構建 markdown 文本編輯器欄目 Spring 简体版

原文原文鏈接

Markdown是一種可使用普通文本編輯器編寫的標記語言，經過簡單的標記語法，它可使普通文本內容具備必定的格式。javascript

前言

Editor.md 是一款開源的、可嵌入的 Markdown 在線編輯器（組件），基於 CodeMirror、jQuery 和 Marked 構建。本章將使用SpringBoot整合Editor.md構建Markdown編輯器。css

下載插件

項目地址：Editor.mdhtml

解壓目錄結構： java

https://user-gold-cdn.xitu.io/2018/3/15/1622a163bb8424b5?w=755&h=629&f=png&s=49125

配置Editor.md

將exapmles文件夾中的simple.html放置到項目中，並配置對應的css和js文件jquery

配置編輯器

......
	<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>
複製代碼

初始化編輯器

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編輯器，效果以下：git

https://user-gold-cdn.xitu.io/2018/3/15/1622a163bba5ecdb?w=1155&h=673&f=png&s=61065

訪問地址：http://localhost:8080/

圖片上傳

因爲在初始化編輯器中配置的圖片上傳地址爲imageUploadURL: "/file",，與之對應，咱們在/file處理文件上傳便可github

@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;

    @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字符串持久化到數據庫中。具體在頁面顯示作法以下：web

<!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>
複製代碼