Vditor 一款浏览器端的 Markdown And Vue

1. 如何在项目中安装

安装依赖npm install vditor --save

在代码中引入并初始化对象

import Vditor from 'vditor'
import "~vditor/src/assets/scss/index"
const vditor = new Vditor(id, {options...})

2. 创建一个编辑器

<div  id="vditor"></div>
mounted() {
   this.contentEditor = new Vditor('vditor', {
        cache: {  //不走缓存
          enable: false
        },
        after: () => {
          this.contentEditor.disabled(true);
        },
      });
  },

3. 常见API

	说明
after	编辑器异步渲染完成后的回调方法
height	编辑器总高度
placeholder	输入区域为空时的提示
input(value: string)	输入后触发
focus(value: string)	聚焦后触发
blur(value: string)	失焦后触发
esc(value: string)	esc 按下后触发
select(value: string)	编辑器中选中文字后触发
value	编辑器初始化值
enable	是否使用 localStorage 进行缓存

4. 编辑器如何设置只读

相关 API： disabled()

this.contentEditor = new Vditor('vditor', {
       after: () => {
          this.contentEditor.disabled(true);
      },
      upload:{}
   });

5. 编辑器如何上传图片

 upload: {
          max: 5 * 1024 * 1024,
          handler(file) {
            const reader = new FileReader();
            reader.onload = function (e) {
              var img_base64 = e.target.result;
              // that.contentEditor.insertValue(`![](${img_base64})`);
              img_base64 = img_base64.replace(/^data:image\/\w+;base64,/, '');
              getupload({ file: img_base64, name: file[0].name }).then(res => {
                 that.contentEditor.insertValue(`![]${res.data})`);
              });
            };
            reader.readAsDataURL(file[0]);
          }
      },