前端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…})

• 具体运用例子

    <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-9u4e00-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’的方法。具体示例如下：

  import VditorPreview from 'vditor/dist/method.min'
  

   <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，如粘贴中包括外链图片可经过指定接口上传到服务器

• 支撑主窗口大小拖拽、字符计数

• 多主题支撑，内置黑白绿三套主题

• 多语言支撑，内置中、英、韩文本地化

• 支撑干流浏览器，对移动端友好