一、技術(shù)選型及分支部署
SpringBoot整合Editor.md構(gòu)建Markdown編輯器共分為三個版本
image.png
下面是Markdown的下載鏈接
Markdown鏈接
先看一下進(jìn)入的頁面以及在編譯器上寫好在瀏覽器上打開的頁面
image.png
瀏覽器上顯示的
image.png
一、我們將在官網(wǎng)上下載下來的文件放在一個文件夾里面，如下圖：
image.png
然后，我們需要將對應(yīng)的文件引入我們的前端文件：
image.png
image.png
在js里面進(jìn)行初始化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'
});
這樣其實就已經(jīng)完成了，但是如果我們還需要繼續(xù)深入搭配SpringBoot的話，那請繼續(xù)往下看。。。
我們應(yīng)該寫一個對應(yīng)的工具類：
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格式轉(zhuǎn)換成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);
}
/**
* 增加擴(kuò)展[標(biāo)題錨點，表格生成]
* Markdown轉(zhuǎn)換成HTML
* @param markdown
* @return
*/
public static String markdownToHtmlExtensions(String markdown) {
//h標(biāo)題生成id
Set<Extension> headingAnchorExtensions = Collections.singleton(HeadingAnchorExtension.create());
//轉(zhuǎn)換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);
}
/**
* 處理標(biāo)簽的屬性
*/
static class CustomAttributeProvider implements AttributeProvider {
@Override
public void setAttributes(Node node, String tagName, Map<String, String> attributes) {
//改變a標(biāo)簽的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" +
"| 阿什頓發(fā) | 非固定桿 | 撒阿什頓發(fā) |\n" +
"\n";
String a = "[imCoding 愛編程](http://www.xietongxue.top)";
System.out.println(markdownToHtmlExtensions(a));
}
}
然后在Service的實現(xiàn)層里面進(jìn)行調(diào)用
@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;
}
這樣大致就完成了
其實我也不是太明白，只是先記下來我做理解的一些地方。。。謝謝??！
