写项目时怎样将后台管理使用的富文本编辑器保存的内容转为HTML格式

前言：
在写博客项目时，后台管理使用了editormd编辑器，内容为Markdown的语法，但在前台显示时显示的不是我想要的效果，如图：
完全没有啥效果，所以得引入一个markdown转HTML的插件：
https://github.com/atlassian/commonmark-java
根据这个项目内的介绍引用即可，可以只引用最基本的，如果需要对h标签加一个id用来做目录或者表格要加一个class用来自适应就需要引用相应的pom。

比如基本的：

<dependency><groupId>com.atlassian.commonmark</groupId><artifactId>commonmark</artifactId><version>0.14.0</version>
</dependency>

对table进行加一些元素的：

<dependency><groupId>com.atlassian.commonmark</groupId><artifactId>commonmark-ext-gfm-tables</artifactId><version>0.14.0</version>
</dependency>

对h标签：

<dependency><groupId>com.atlassian.commonmark</groupId><artifactId>commonmark-ext-heading-anchor</artifactId><version>0.14.0</version>
</dependency>

然后工具类展示下：

package com.yuer.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.*;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标题生成idSet<Extension> headingAnchorExtensions = Collections.singleton(HeadingAnchorExtension.create());//转换table的HTMLList<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 {@Overridepublic void setAttributes(Node node, String tagName, Map<String, String> attributes) {//改变a标签的target属性为_blankif (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));}
}

写项目时怎样将后台管理使用的富文本编辑器保存的内容转为HTML格式相关推荐

IIS或Apache部署Django项目时，Admin后台管理CSS样式丢失？
运行环境: Windows 10 专业版 64位 Python27 Django1.11 Mysql5.7 IIS 10 或 Apache24 丢失CSS样式后的界面: 正确加载CSS样式的界面: 通 ...
layui后台管理、图片裁切、cropper富文本编辑器实现
需求:后台管理系统一般都会有图文混排功能(比如新闻应用,电商商品详情),这个一般使用富文本编辑器来实现:还有一个就是图片的裁切(比如用户的头像,比如博客的封面),因为在开发这两个功能的时候,也遇到了很 ...
django项目中使用KindEditor富文本编辑器
先从官网下载插件,放在static文件下前端引入学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...
vue-quill富文本编辑器插入img标签时自定义属性
最近被quill.js这个富文本编辑器折磨了好几天,最终也算是完成需求.现描述一下这次遇到的需求时什么: 产品说需要在富文本编辑器加入一个图文混排的功能(图片需要支持缩放.并且图片与文字需要居中对齐) ...
vue管理后台项目中使用wangEditor富文本编辑器
背景公司需要做一个后台文章管理的模块,通过富文本编辑器编辑文章,在前端显示.调研了很久,决定使用wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.一些编辑器的说明. 开始 ...
C语言中‘/n’和‘\n’(写项目时发现)
c语言中'\n',众所周知是换行符.而'/n'用到的人就很少了,下面介绍我写项目时发现的问题. 就是灰色区域的问题,这是改好的程序. 一开始这里定义了char select:scanf("% ...
luffcc项目-08-课程详情页、CKEditor富文本编辑器、课程详情页面、后台接口
课程详情页一.CKEditor富文本编辑器富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带h ...
《React后台管理系统实战：五》产品管理（二）：产品添加页面及验证等、富文本编辑器、提交商品
一.产品添加基础部分 1 home.jsx点添加按钮动作跳转到添加商品页点击:onClick={() => this.props.history.push('/product/add-upda ...
后台管理系统2——文件上传功能、富文本编辑器集成
文章目录 1 文件上传功能 1.1 后台方面 1.2 数据库表的修改 1.3 前端方面 1.4 后端跨域问题 2 富文本编辑器 2.1 使用方法 2.2 在项目中的具体应用. 2.2.1 创建news ...

写项目时怎样将后台管理使用的富文本编辑器保存的内容转为HTML格式

写项目时怎样将后台管理使用的富文本编辑器保存的内容转为HTML格式相关推荐

最新文章

热门文章