Markdown插件的用法

一、技術選型及分支部署

SpringBoot整合Editor.md構建Markdown編輯器共分為三個版本

下面是Markdown的下載鏈接
Markdown鏈接
先看一下進入的頁面以及在編譯器上寫好在瀏覽器上打開的頁面

瀏覽器上顯示的

一、我們將在官網上下載下來的文件放在一個文件夾里面，如下圖：

然后，我們需要將對應的文件引入我們的前端文件：


在js里面進行初始化markdown插件

//初始化Markdown編輯器
    var contentEditor;
    $(function() {
      contentEditor = editormd("md-content", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
//        path    : "../static/lib/editormd/lib/"
        path    : "/lib/editormd/lib/"
      });
    });
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    //下拉組件
    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

這樣其實就已經完成了，但是如果我們還需要繼續深入搭配SpringBoot的話，那請繼續往下看。。。
我們應該寫一個對應的工具類：

package com.xieyunjie.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.xietongxue.top)";
        System.out.println(markdownToHtmlExtensions(a));
    }
}

然后在Service的實現層里面進行調用

@Transactional
    @Override
    public Blog getAndConvert(Long id) {
        Blog blog = blogRepository.findOne(id);
        if (blog == null) {
            throw new NotFoundException("該博客不存在");
        }
        Blog b = new Blog();
        BeanUtils.copyProperties(blog,b);
        String content = b.getContent();
        b.setContent(MarkdownUtils.markdownToHtmlExtensions(content));

        blogRepository.updateViews(id);
        return b;
    }

這樣大致就完成了
其實我也不是太明白，只是先記下來我做理解的一些地方。。。謝謝！！