<div id="editer" contenteditable @input="getEditer($event)"></div>
  <!-- 上传视频-->
 <input ref="fileVideo" type="file" accept="video/*" @change="uploadVideo($event)" />
 <!-- 上传图片-->
 <input ref="fileImg" type="file" accept="image/*" @change="uploadImg($event)" />
getUpload(e) {
      return new Promise((resolve, reject) => {
      //通过id聚焦放置文本内容
        var editer = document.getElementById("editer");
        editer.focus();
        this.$axios({
          method: "post",
          url:"http:///uploadFile",
          data: file
        }).then(res => {
          if (res.data.status == 200) {
            resolve(res.data.info.url);
          }
        });
      });
    },
     // 上传视频
    uploadVideo(e) {
      this.getUpload(e).then(res => {
        this.$refs.fileVideo.value = ""; //处理change不能同时上传相同文件
        document.execCommand(
          "insertHTML",
          false,
          "<div> <video controls src= " + res + "></video> </div>"
        );
      });
    },
    // 上传图片
    uploadImg(e) {
      this.getUpload(e).then(res => {
        this.$refs.fileImg.value = "";
        document.execCommand("InsertImage", false, res);
      });
    },

document.execCommand

自定义富文本主要在于对document.execCommand的了解
如果还需要自定义富文本组件，比如设置字体、加粗…直接去​​​文档地址​​去拿