基本介绍

Vditor 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。

GitHub地址：https://github.com/Vanessa219/vditor

使用文档地址：https://ld246.com/article/1549638745630

编译后的文件地址：https://unpkg.com/browse/vditor@3.9.2/dist/

基本使用

这里介绍的是使用原生的JS ，传统引入模式。

1. 引入所需的文件

   <link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
   <script src="https://unpkg.com/vditor/dist/index.min.js"></script>

2. 创建一个HTML标签

   <div id="editor"></div>

3. 实例化编辑器

   <script>
   <!--使用默认配置创建编辑器对象-->
   const vditor = new Vditor('editor')
   </script>

   我们还可以在创建编辑器对象的时候，指定一些常见配置，比如说：

   const vditor = new Vditor('editor', {
    // 默认的模式 所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）
    mode: 'wysiwyg'
    // 指定编辑器的主题
    // theme: 'classic'
    // theme: 'dark'
   
    // 设置编辑器的宽高
    // height: 300
    minHeight: 200,
    // width: 900,
    // 无内容时候的提示语
    placeholder: '请输入您的内容',
   // 语言包
    // lang: 'zh_TW'
    // 计数器
    counter: {
      enable: true,
      // max: 10,
      // after: function (num, opt) {
      //     if (opt.max < num) {
      //         alert('文字输入的有点多')
      //     }
      // }
    }
   // 上传相关的配置
    upload: {
      url: 'http://127.0.0.1/f1',
      fieldName: 'uploadFile',
      linkToImgUrl: 'http://127.0.0.1/f2'
    }
    ,
    // toolbar: [
    //     'emoji', 'headings', 'bold', 'italic', 'strike', '|', 'line', 'quote', 'list', 'ordered-list', 'check', 'outdent', 'indent', 'code', 'inline-code', 'insert-after', 'insert-before', 'undo', 'redo', 'upload', 'link', 'table', 'record', 'edit-mode', 'both', 'preview', 'fullscreen', 'outline', 'code-theme', 'content-theme', 'export', 'devtools', 'info', 'help', 'br'
    // ]
   })

4. 使用 JS 获取编辑器里面的内容，常见的有如下方法：

   vditor.getValue()
   vditor.getHTML()
   // vditor.insertValue('# 8888')
   // vditor.disabled()
   vditor.enable()

上传相关的配置

上传的配置项是 upload

upload: {
//上传文件的服务端接口地址
 url: 'http://127.0.0.1/f1',
 // 上传文件的字段名
 fieldName: 'uploadFile',
 // 复制网络图片粘贴后自动上传的接口地址
 linkToImgUrl: 'http://127.0.0.1/f2'
}

文件上传：

文件的上传支持单个上传以及批量上传，编辑器默认使用的 formData 类型的数据进行上传的。

需要服务端返回的数据格式是这样的：

{
// 提示消息
"msg": "",
// 0 表示无错误
"code": 0,
  "data": {
        // 上传失败的文件名列表
        "errFiles": ['filename', 'filename2'],
        // 成功上传的文件列表
        "succMap": {
          // 文件名: 文件在服务端的地址
          "filename3": "filepath3",
          "filename3": "filepath3"
        }
    }
}

复制网络图片粘贴后自动上传：

我们复制的网络上的图片，是个存放在其它服务上的地址，为了防止丢失，我们可以在粘贴到编辑器的时候，自动将其上传到我们自己的服务器上，只需要配置 linkToImgUrl 即可，该配置项的值为一个 上传接口地址。一旦配置了该项，当我们复制的内容中有远程图片的时候，会自动将图片的地址发送到我们配置的接口。使用的是 POST 方式发送，发送的内容格式是 JSON 格式的，具体类似这样：

{ url: src }

该接口的返回值格式应该是这样的：

{
msg: '',
code: 0,
data : {
  // 原来的地址
  originalURL: '',
  // 上传到我们服务器上的地址
  url: ''
}
}

html 和 md 文件互转

我们获取到的md格式的数据，可以使用静态方法 ：Vditor.md2html(md内容) 转换成 html 格式的内容。

使用该方法的时候，不需要完整引入vditor的库文件，只需引入 method.min.js就可以。

我们拿到 html 格式的数据，可以使用 实例方法：vditor.html2md(html内容) 转成 markdown 格式的数据。

我们建议，在数据保存 markdown 格式的数据，需要渲染的时候，使用 Vditor.md2html(md内容)  转成 html 内容，然后渲染到页面中即可。

代码高亮：

方法1：

无需引入其它文件，只需引入method.min.js文件，就能直接使用静态方法 highlightRender() 去处理。

let xx = `这里是markdown格式的字符`
let x1 = document.getElementById('x1')
x1.innerHTML = await Vditor.md2html(xx)
Vditor.highlightRender(x1)

方法2：

可以使用 highlight.js 进行代码高亮处理，不过要引入新的库。

<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/base16/default-light.min.css">
<script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
<script>
// 注意要现将内容渲染到页面中以后再去执行下面方法
hljs.highlightAll();
</script>