mavon-editor 解析
问题背景
在用markdown-it解析mavon-editor写的markdown时发现居中对齐::: hljs-center
无法解析,同时发现左右对齐、角标、插注markdown-it也无法解析成html进行渲染。在阅读mavon-editor源码之后,找到几种解决方案。
解决方案
方案一:使用markdown-it插件与mavon-editor样式渲染。
原生markdown时不支持居中对齐、左右对齐、角标、插注的,阅读mavon-editor源码发现mavon-editor基于markdown-it与markdown-it插件实现,markdown-it提供了原生markdown的基础功能,而markdown-it插件提供了居中对齐、左右对齐、角标、插注等功能。
具体请查看: mavon-editor官方文档、markdown-it插件官方文档。
1.1 导入mavon-editor包与markdown-it插件。
1.1.1 在package.json里加入
"markdown-it": "^13.0.1",
"markdown-it-abbr": "^1.0.4",
"markdown-it-container": "^3.0.0",
"markdown-it-emoji": "^2.0.2",
"markdown-it-footnote": "^3.0.3",
"markdown-it-ins": "^3.0.1",
"markdown-it-katex-external": "^1.0.0",
"markdown-it-mark": "^3.0.1",
"markdown-it-sub": "^1.0.0",
"markdown-it-sup": "^1.0.0",
"mavon-editor": "^3.0.1",
1.1.2 安装插件与mavon-editor
npm install
1.2 引入mavon-editor样式与markdown-it插件。
1.2.1 在main.js全局引入mavon-editor样式
import 'mavon-editor/dist/css/index.css'
1.2.2 使用markdown-it与其插件
const MarkdownIt = require('markdown-it')()
.use(require('markdown-it-katex-external'))
.use(require('markdown-it-emoji'))
.use(require('markdown-it-container'), 'hljs-center') // 容器插件
.use(require('markdown-it-container'), 'hljs-left')
.use(require('markdown-it-container'), 'hljs-right')
.use(require('markdown-it-sup')) // 上角标插件
.use(require('markdown-it-sub')) // 下角标插件
.use(require('markdown-it-footnote')) // 脚注插件
.use(require('markdown-it-abbr')) // 缩写插件
.use(require('markdown-it-ins')) // 插入插件
.use(require('markdown-it-mark')) // 标记插件
1.2.3 转化成html
data.contentHtml = MarkdownIt.render(data.contentMd)
1.2.4 v-html渲染
<template>
<div class="markdown-body" v-html="data.contentHtml" />
</template>
注:class="markdown-body"
是必要的,否则居中对齐、左右对齐等会不生效,需要在自定义样式可在外层再加一层div。
方案二:后端直接存储mavon-editor渲染后的html,前台直接使用mavon-editor样式渲染。(推荐)
以空间换时间,mavon-editor已经帮我们解析好了,又何必使用时再去解析一遍呢,直接用css渲染就好了。
2.1. mavon-editor编辑器导入事件
<mavon-editor ref="md" v-model="article.articleContent" @imgAdd="uploadImg" style="height: calc(100vh - 260px)" @change="change"/>
@change为引入的事件
methods: {
change(value,render){
this.article.articleContentHtml = render;
this.article.articleContentMd = value;
},
}
调用接口保存article.articleContentHtml
和article.articleContentMd
到数据库。
2.2. 前台引入mavon-editor样式并渲染
2.2.1 安装
npm install mavon-editor
2.2.2 在main.js引入mavon-editor样式
import 'mavon-editor/dist/css/index.css'
2.2.3 渲染
<template>
<div class="markdown-body" v-html="article.articleContentHtml" />
</template>
注:class="markdown-body"
是必要的,否则居中对齐、左右对齐等会不生效,需要在自定义样式可在外层再加一层div。
样例:
mavon-editor文件
::: hljs-center
居中
:::
::: hljs-right
右对齐
:::
::: hljs-left
左对齐
:::
^下角标^2
~上角标~2
==插注==
~~中划线~~
++下划线++
*斜体*
**粗体**