mavon-editor 自定义工具栏按钮，实现文件上传功能(或其他自定义功能)。

需求描述

mavon-editor增加文件上传功能，并将文件地址插入当前光标所在位置。

实现思路

1. 在工具栏中增加自定义图标
2. 监听自定义按钮事件
3. 上传成功后将文件名称和文件地址插入光标所在位置

工具栏自定义图标

编辑器其实带有四个插槽，分别是左工具栏前，左工具栏后，右工具栏前，右工具栏后

image.png

效果如下

image.png

点击触发选择文件并上传功能

    // 这是我们自定义的按钮触发的方法，这里也可以在自定义其他功能时做一些其他操作。
    uploadFile() {
      // 通过ref找到隐藏的input标签，触发它的点击方法
      this.$refs.uploadInput.click()
    },
    // 监听input获取文件的状态
    uploadFileChange(e) {
      // 获取到input选取的文件
      const file = e.target.files[0]
      // 创建form格式的数据，将文件放入form中，logo是与后台定义的字段
      const formdata = new FormData()
      formdata.append('logo', file)

      // 发送请求，这里是大家各自的axios请求，方法大家按照各自项目更换就好啦
      axios.post('/upload',formdata).then(res => {
        // 这里获取到的是mavon编辑器实例，上面挂载着很多方法
        const $vm = this.$refs.md
        // 将文件名与文件路径插入当前光标位置，这是mavon-editor 内置的方法
        $vm.insertText($vm.getTextareaDom(),
          {
            prefix: `[${file.name}](${res.data.path})`,
            subfix: '',
            str: ''
          })
      })
    },

image.png

总结：以上就是mavon-editor自定义工具栏的方法啦！我只是一个在内卷中苦苦挣扎的大专生——天铭，希望和大家共同努力，只要我们足够努力，我们的老板就能早日过上自己想要的日子！