前端好用的markdown 插件总结(涉及生成目录)

优质插件

1. 偶尔发现了掘金使用的bytemd 插件，vue,angulr,react 都可以进行支持，官方地址https://bytemd.js.org/#usage

任何前端框架通用

1. Editor.md https://pandao.github.io/editor.md/#dependents
   1.1 AngularJs 12 使用 Editor.md 实现 Markdown 编辑 https://www.cnblogs.com/xiaqiuchu/p/15165258.html
   问题： 和ngx-echarts 不兼容，两者使用会报错(解决：可以使用原生的进行调用)

2. Vditor https://b3log.org/vditor/
   问题：使用如果 ### {aaa} 这样写，无法渲染出 {aaa} 且提了issue, 官方暂时未改

3. https://github.com/nhn/tui.editor
   问题：暂时无法生成目录

vue框架 使用

1. mavon-editor （支持vue2, vue3）

项目中的需求总结

生成目录

兜兜转转没有发现特别好用的插件，最后自己用正则解析marked.js，生成的html实现。

npm install -g marked

代码实现

import { marked } from 'marked'
this.mdContent (markdown 内容)
   let matchMapList = marked.parse(this.mdContent).match(/(<h)[\d\s]+(id=)["'\w-]+>[^<]+</g).map(item => {
      let curretItem = item.match(/(<h)[\d\s]+(id=)["'\w-]+>/g)[0]
      return {
        hName: Number(curretItem.match(/<h[\d]+/)[0].slice(2)),
        id: curretItem.match(/id=[\S]+/)[0].slice(4,-2),
        liName: item.slice(curretItem.length, -1).trim(),
        children: []
      }
    })