菜鸟的markdown编辑器集成

最新推荐文章于 2024-08-08 07:08:23 发布

最强菜鸟

最新推荐文章于 2024-08-08 07:08:23 发布

阅读量632

点赞数 1

分类专栏：前端文章标签： markdown

本文链接：https://blog.csdn.net/qq_40298902/article/details/106579203

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

菜鸟的markdown编辑器集成

说明
一、下载
二、使用
三、案例

说明

这里介绍一款比较好用的mardown编辑器，本文会持续更新，不断地扩充

本文仅为记录学习轨迹，如有侵权,联系删除

一、下载

对于什么是markdowm编辑器以及markdowm语法这里就不多解释了，直接给出下载地址

下载的链接：mardown编辑器

这是一个开源的项目，就像下图所说的那样，开源在线的markdown编辑器
在这里插入图片描述
将其下载下来之后，有如下文件

其他文件，像docs文档，图片等就不介绍了，主要看examples的使用

具体的可以自己去玩一下

二、使用

打开下载的markdown的案例首页
在这里插入图片描述

简单使用simple.html
在这里插入图片描述

在这里插入图片描述
使用的时候直接复制页面即可，注意把相应的css和js样式的引入

三、案例

使用的时候需要把它集成到项目里面，这里重新开了一个简单的项目
数据库
在这里插入图片描述
将markdown编辑器加载到项目里面，需要在项目里静态资源里面创建一个文件夹用于存放markdwon编辑器的样式，新建lib文件夹，在里面新建editormd文件夹存放markdwon编辑器的样式

前端页面有两个，编辑页面（markdown）和博客详情页面(blog)

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>markdown编辑器</title>
    <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="layout">

    <header>
        <h1>Simple example</h1>
    </header>

    <form th:action="@{/submitMarkDown}" method="post">
        <div id="test-editormd">
            <textarea style="display:none;" name="context"> 在此输入内容 </textarea>
        </div>

        <div style="text-align:center">
            <input type="submit" value="确定">
        </div>

    </form>
</div>
<!--<script src="js/jquery.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "../lib/editormd/lib/"
        });
    });
</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客详情</title>
</head>
<body>
<h2>博客详情如下</h2>
<div th:utext="${blog.getContext()}"></div>
</body>
</html>

注意：前端页面可以从下载的markdown编辑器的案例里面复制过来

实体类

package com.zsc.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class MarkDown {
    private Integer id;
    private String context;
}

控制器

package com.zsc.controller;

import com.zsc.domain.MarkDown;
import com.zsc.mapper.MarkDownMapper;
import com.zsc.util.MarkdownUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MarkDownController {
    @Autowired
    private MarkDownMapper markDownMapper;

    @GetMapping("/toMarkDown")
    public String toMarkDown(){
        return "markdown";
    }

    @PostMapping("/submitMarkDown")
    public String submitMarkDown(@RequestParam String context){
        Integer num = markDownMapper.insertContext(context);

        return "redirect:/toMarkDown";
    }

    @GetMapping("/getBlog")
    public String getBlog(Model model){
        MarkDown markDown = markDownMapper.getMarkDown(1);

        String context = MarkdownUtils.markdownToHtmlExtensions(markDown.getContext());
        markDown.setContext(context);

        model.addAttribute("blog",markDown);
        return "blog";

    }


}

注意，这里需要增加一个工具类，将markdown语法转为html

package com.zsc.util;

import org.commonmark.Extension;
import org.commonmark.ext.gfm.tables.TableBlock;
import org.commonmark.ext.gfm.tables.TablesExtension;
import org.commonmark.ext.heading.anchor.HeadingAnchorExtension;
import org.commonmark.node.Link;
import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.AttributeProvider;
import org.commonmark.renderer.html.AttributeProviderContext;
import org.commonmark.renderer.html.AttributeProviderFactory;
import org.commonmark.renderer.html.HtmlRenderer;

import java.util.*;

/**
 * Created by limi on 2017/10/22.
 */
public class MarkdownUtils {

    /**
     * markdown格式转换成HTML格式
     * @param markdown
     * @return
     */
    public static String markdownToHtml(String markdown) {
        Parser parser = Parser.builder().build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(document);
    }

    /**
     * 增加扩展[标题锚点，表格生成]
     * Markdown转换成HTML
     * @param markdown
     * @return
     */
    public static String markdownToHtmlExtensions(String markdown) {
        //h标题生成id
        Set<Extension> headingAnchorExtensions = Collections.singleton(HeadingAnchorExtension.create());
        //转换table的HTML
        List<Extension> tableExtension = Arrays.asList(TablesExtension.create());
        Parser parser = Parser.builder()
                .extensions(tableExtension)
                .build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder()
                .extensions(headingAnchorExtensions)
                .extensions(tableExtension)
                .attributeProviderFactory(new AttributeProviderFactory() {
                    public AttributeProvider create(AttributeProviderContext context) {
                        return new CustomAttributeProvider();
                    }
                })
                .build();
        return renderer.render(document);
    }

    /**
     * 处理标签的属性
     */
    static class CustomAttributeProvider implements AttributeProvider {
        @Override
        public void setAttributes(Node node, String tagName, Map<String, String> attributes) {
            //改变a标签的target属性为_blank
            if (node instanceof Link) {
                attributes.put("target", "_blank");
            }
            if (node instanceof TableBlock) {
                attributes.put("class", "ui celled table");
            }
        }
    }


    public static void main(String[] args) {
        String table = "| hello | hi   | 哈哈哈   |\n" +
                "| ----- | ---- | ----- |\n" +
                "| 斯维尔多  | 士大夫  | f啊    |\n" +
                "| 阿什顿发  | 非固定杆 | 撒阿什顿发 |\n" +
                "\n";
        String a = "[imCoding 爱编程](http://www.lirenmi.cn)";
        System.out.println(markdownToHtmlExtensions(a));
    }
}