前端markdown编辑器vditor的使用

前言

最近项目需要重构知识库系统，经过了一些调研，跟群里的前端小伙伴讨论，以及去github对比了各种前端markdown插件的star数等，最终选择了高star，高下载量的vditor。

vditor的优点，用其官方的说法："易于使用的 Markdown 编辑器，为适配不同的应用场景而生"，简单来说就是功能比较全面，且不局限于特定的前端框架，vue，react甚至jquery都可以使用。

基本用法

我的项目是vue2.x的项目，所以本文主要介绍的vditor在vue2.x中的用法。

安装依赖

npm install vditor --save
在代码中引入并初始化对象，这里介绍局部引入的方式，在某个vue组件里面引入，分别引入vditor和样式文件。

import Vditor from 'vditor'

import 'vditor/dist/index.css' 或者按照官方写的方式 import "~vditor/src/assets/less/index"

初始化

const vditor = new Vditor(id, {options...})

具体使用例子

javascript 复制代码

  <div id="markdownDocument" />
   const wikiContent = '' // 这里就是要展示的文章，一般从后端接口获取
   const editDocument = document.getElementById('markdownDocument')
   this.articleEditor = new Vditor(editDocument, {
            height: 600,
            mode: 'sv',
            preview: {
              theme: {
                // 设置内容主题
                current: 'classic'
              },
              hljs: {
                // 设置代码块主题
                style: 'dracula'
              },
              actions: []
            },
            toolbarConfig: {
              pin: true
            },
            upload: {
              url: `article/uploadImage`,
              accept: 'image/*',
              fieldName: 'file',
              token: 'test',
              multiple: false,
              filename(name) {
                return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '')
                  .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '')
                  .replace('/\\s/g', '')
              },
              format(files, responseText) {
                const res = JSON.parse(responseText)
                const name = files[0].name
                const url = res.data
                const result = JSON.stringify({
                  code: 0,
                  data: { errFiles: '', succMap: { [name]: url }}
                })
                return result
              }
              // success(ele, msg) {
              //   // console.log(msg)
              // },
              // error(ele, msg) {
              //   console.log(ele)
              //   console.log(msg)
              // }
            },
            toolbar: [
              'emoji', 'headings', 'bold', 'italic', 'strike', '|', 'line', 'quote', 'list', 'ordered-list',
              'check', 'outdent', 'indent', 'code', 'inline-code', 'insert-after', 'insert-before', 'undo',
              'redo', { name: 'upload', tip: '上传图片' }, 'link', 'table', 'edit-mode', 'both', 'preview', 'fullscreen',
              'outline', 'code-theme', 'export', 'devtools', 'br'
            ],
            cache: {
              enable: false
            },
            after: () => {
            // 这里给markdown编辑器设置文章内容
              this.articleEditor.setValue(wikiContent)
            }
          })

是不是比较熟悉，跟echarts的用法比较类似。定义一个容器，获取容器dom，然后添加相关的option。通过mode设置三种编辑模式：所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）。toolbar用于设置需要的功能区的功能。可以根据自己的需要做一些个性化的配置，上方的实例以文件上传为例，如果我们要限制只能上传图片，就可以自定义这边的工具栏的工具名称为上传图片{ name: 'upload', tip: '上传图片' }，具体上传参数还需要在upload属性中配置。

具体的Option的配置参数这里就不多做介绍，可以查看官方文档ld246.com/article/154...

只需要查看，不需要编辑markdown的写法

我们实际的开发中，可能不光有要编辑的场景，可能还有只需要根据后端接口返回数据，展示markdown文章的场景。vditor有两种实现方式：方式一通过引入'vditor/dist/method.min'包的方式；方式二通过md2html(mdText: string, options?: IPreviewOptions)方法。我用的是第一种，引入 'vditor/dist/method.min'的方式。具体示例如下：
javascript 复制代码
```
import VditorPreview from 'vditor/dist/method.min'
```
php 复制代码
```
 <div id="viewDoc" ref="viewDoc" />
 const content = '# 标题 正文' // 这里后端接口返回markdown文章，就是那种'# 标题，**加粗**'的这种markdown语法的文章
 const viewDoc = document.getElementById('viewDoc')
 VditorPreview.preview(viewDoc, content, {
    theme: {
      current: 'light'
    },
    hljs: {
      style: 'github'
    }
  })
```
theme设置主题，默认"light"，可选项有{ "ant-design": "Ant Design", dark: "Dark", light: "Light", wechat: "WeChat" }，hljs设置代块样式。第二种方式Vditor.md2html具体可以参考下官方文档，这里不做详细介绍了。

总结

vditor还是现在的markdown插件中比较优秀的，下载量已经超越了前辈Editor.md。如果实际项目有markdown的嵌入需求，推荐可以使用vditor。以上只是介绍了一些基础的用法，还有一些高级用法，这里粘贴下官方介绍（附上官方地址：ld246.com/tag/vditor）...

支持三种编辑模式：所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）
支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、plantumlUML 图
导出、图片懒加载、任务列表、多平台预览、多主题切换、复制到微信公众号/知乎功能
实现 CommonMark 和 GFM 规范，可对 Markdown 进行格式化和语法树查看，并支持 10+ 项配置
工具栏包含 36+ 项操作，除支持扩展外还可对每一项中的快捷键、提示、提示位置、图标、点击事件、类名、子工具栏进行自定义
表情/at/话题等自动补全扩展
可使用拖拽、剪切板粘贴上传，显示实时上传进度，支持 CORS 跨域上传
实时保存内容，防止意外丢失
录音支持，用户可直接发布语音
粘贴 HTML 自动转换为 Markdown，如粘贴中包含外链图片可通过指定接口上传到服务器
支持主窗口大小拖拽、字符计数
多主题支持，内置黑白绿三套主题
多语言支持，内置中、英、韩文本地化
支持主流浏览器，对移动端友好