mavon-editor 解析居中对齐、左右对齐、角标、插注问题的完整解决方案。

置顶 class Ling

已于 2023-09-01 15:09:01 修改

阅读量722

点赞数 1

文章标签：编辑器 html5

于 2023-06-26 10:57:24 首次发布

本文链接：https://blog.csdn.net/weixin_44907888/article/details/131390693

版权

问题背景

在用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>