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...})

  1. 创建一个编辑器
<div  id="vditor"></div>
mounted() {
   this.contentEditor = new Vditor('vditor', {
        cache: {  //不走缓存
          enable: false
        },
        after: () => {
          this.contentEditor.disabled(true);
        },
      });
  },
  1. 常见API
说明
after编辑器异步渲染完成后的回调方法
height编辑器总高度
placeholder输入区域为空时的提示
input(value: string)输入后触发
focus(value: string)聚焦后触发
blur(value: string)失焦后触发
esc(value: string)esc 按下后触发
select(value: string)编辑器中选中文字后触发
value编辑器初始化值
enable是否使用 localStorage 进行缓存
  1. 编辑器如何设置只读

相关 API: disabled()

this.contentEditor = new Vditor('vditor', {
       after: () => {
          this.contentEditor.disabled(true);
      },
      upload:{}
   });
  1. 编辑器如何上传图片

 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]);
          }
      },
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值