一、技术选型及分支部署
SpringBoot整合Editor.md构建Markdown编辑器共分为三个版本
image.png
下面是Markdown的下载链接
Markdown链接
先看一下进入的页面以及在编译器上写好在浏览器上打开的页面
image.png
浏览器上显示的
image.png
一、我们将在官网上下载下来的文件放在一个文件夹里面，如下图：
image.png
然后，我们需要将对应的文件引入我们的前端文件：
image.png
image.png
在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;
}
这样大致就完成了
其实我也不是太明白，只是先记下来我做理解的一些地方。。。谢谢！！
