一：HTML结构

  <quill-editor
          ref="myQuillEditor"
          v-model="formData.content"
          class="myQuillEditor"
          :options="editorOption"
          v-loading="videoLoading"
          @change="onEditorChange($event)"
        />
        <input
          type="file"
          accept="video/*"
          @change="changeVideo"
          id="uploadVideoDown"
          style="display: none"
        />

1：安装

npm install vue-quill-editor -S

2：引入

import { quillEditor, Quill } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//（需要上传图片就安装）
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend); //注册扩展模块
// 这里引入修改过的video模块并注册（如果需要上传视频就弄）
import Video from "./quill-video";
Quill.register(Video, true);

3：安装图片插件（可选）                                                                                                               

 npm install --save quill-image-extend-module

3-1：video的处理js文件（新建一个quill-video.js文件）（可选）

import { Quill } from 'vue-quill-editor'
// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class Video extends BlockEmbed {
  static create (value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls')
    node.setAttribute('type', 'video/mp4')
    node.setAttribute('src', this.sanitize(value))
    return node
  }
  static formats (domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }

  static sanitize (url) {
    return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
  }

  static value (domNode) {
    return domNode.getAttribute('src')
  }

  format (name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }
  html () {
    const { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video' //不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe
export default Video

 

4：data中定义相关数据

 // 富文本框参数设置
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: "file",
            size: 3,
            error: () => {
              this.$message({
                message: "上传失败",
                type: "error",
              });
            }, // 可选参数 上传失败触发的事件
            action: "https://xxx.xxx.cn/api/manager/file/uploadFile",
            response: (res) => {
              return res.data;
            },
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id);
              },
              video: function (value) {
                if (value) {
                  document.querySelector("#uploadVideoDown").click();
                } else {
                  return;
                }
              },
            },
          },
        },
      },

 5:methods中的事件

  onEditorChange({ quill, html, text }) {
      console.log("editor changed:", quill, html, text);
      console.log("html.replace(/<[^>]*>|/g:", html.replace(/<[^>]*>|/g));
      this.$emit("update:content", html);
      this.$emit("change", html);
    },
    //makdown上传视频
    changeVideo(e) {
      let file = e.target.files[0];
      const formData = new FormData();
      formData.append("file", file);
      this.videoLoading = true;
      api
        .uploadImg(formData)
        .then((res) => {
          console.log(res)
          let quill = this.$refs.myQuillEditor.quill;
          if (res.code == 200) {
            this.videoLoading = false;
            let length = quill.getSelection().index; //光标位置
            quill.insertEmbed(length, "video", res.data);
            quill.setSelection(length + 1); //光标后移一位
          }
        })
        .catch((err) => {
          this.$message({
            message: "视频上传失败,请重试",
            type: "error",
            center: true,
            offset: 100,
          });
          this.videoLoading = false;
        });
    },

二：uniapp处理结构（由于rich-text不支持video标签的解析）

 

1：在插件市场找到（uParse 富文本解析 https://ext.dcloud.net.cn/plugin?id=183）

2： 引入

import uParse from '@/components/u-parse/u-parse.vue';

3：html结构

<u-parse :content="contnets"></u-parse>

4：js处理(img标签)

const regex = new RegExp('<img', 'gi');
 this.contnets=res.data.content.replace(regex, `<img style="max-width:100%;height:auto;display:block;margin-bottom:10px"`)

5：css处理video

video{
        width: 100%;
    }