使用vue-quill-editor遇到的坑

1.字体样式设置失效，eg：加粗，倾斜，下划线等等

  是因为被全局的样式覆盖了

2.视频添加链接，随便输入地址，默认就变成了自己本地项目的地址，而且他的视频是嵌入式的（把我的项目整个都嵌入进来了），使用审查元素查看是iframe标签，我就把iframe标签改成video标签

    // 在项目中引入vue-quill-editor
    import { Quill } from 'vue-quill-editor'
    
    // 在mounted中调用
    mounted() {
        this.videoList()
   },
  // 自定义视频
  videoList() {
      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('autoplay', true)
          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' // 直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
      Video.className = 'ql-video'
      Video.tagName = 'video' // 用video标签替换iframe
      Quill.register(Video)
    },

3：添加链接时，随便输入url地址，也是跳到自己本地，只能重新配置了

参考链接：https://blog.csdn.net/HH18700418030/article/details/120063170

4.富文本编辑vue-quill-editor自定义图片、文件上传

参考链接：https://www.jianshu.com/p/9e4e4d955d0f

html

<template>
  <div class="quillEditor">
    <el-upload
      :show-upload-list="false"
      :http-request="fileUpload"
      :before-upload="handleFileBeforeUpload"
      type="drag"
      multiple
      action=""
      :accept="'file/*'"
      class="uploadFile">
      <el-button class="el-icon-upload"></el-button>
    </el-upload>
    <quill-editor ref="myQuillEditor"
                  v-model="messageContentEditor"
                  :options="editorOption">
    </quill-editor>
  </div>
</template>

css 加入icon，以及隐藏上传按钮

 .quillEditor {
    ::v-deep .ql-editor {
      height: 300px;
    }
    ::v-deep .ql-snow.ql-toolbar .ql-upload {
      background: url("https://img2.baidu.com/it/u=4269024829,236711023&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=468");
      background-size: 42px 42px;
      background-position: center center;
      background-repeat: no-repeat;
    }
    .uploadFile {
      width: 0;
      height: 0;
      display: none;
    }
  }

js

import { Quill } from 'vue-quill-editor'
// 工具栏配置
let toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }], // 字体颜色、[{ color: [] }, { background: [] }]
  [{ background: [] }],// 字体背景颜色-----
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['link', 'image', 'video', 'upload'] // 链接、图片、视频-----['link', 'image', 'video']
]

export default {
    data() {
    return {
      //富文本编辑器配置
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'upload': (value) => {
                if (value) {
                  document.querySelector('.uploadFile input').click()
                }
              }
            }
          }
        },
        theme: 'snow',
        placeholder: '请输入正文'
      },
      messageContentEditor: ''
    }
  },
   mounted() {
    this.downloadList()
  },
  methods: {
  // 自定义插入download
     downloadList() {
      let BlockEmbed = Quill.import('blots/block/embed')
      class download extends BlockEmbed {
        static create(value) {
          let node
          node = super.create(value.href)
          node.setAttribute('href', value.href)
          node.setAttribute('download', value.innerText)
          node.setAttribute('target', '_self')
          node.onclick = function () {
            window.location.href = value.href
          }
          node.innerText = value.innerText
          node.download = value.innerText
          return node
        }
      }
      download.blotName = 'download'
      download.tagName = 'a'
      Quill.register(download)
    },
    // 文件上传
    fileUpload(param) {
      let formData = new FormData()
      formData.append('file', param.file)
      接口.then(response => {
        if (response.code === 200) {
          // 调用成功后的回调
          param.onSuccess(param)
          this.handleFileSuccess(param.file, response.data)
        }
      })
    },
   //判断上传的是否符合要求
    handleFileBeforeUpload(file) {
      if (this.updateFileSize != '') {
        let isLt2M = file.size / 1024 / 1024 < 10
        if (isLt2M > this.updateFileSize) {
          this.$message({
            message: '您上传的文件大小已超出允许范围',
            type: 'warning'
          })
          return false
        }
      }
    },
     // 文件上传成功
    handleFileSuccess(file, response) {
      let fileNameLength = file.name.length
      let url = 'url地址'
      // 插入链接
      let quill = this.$refs.myQuillEditor.quill
      // 获取光标所在位置
      let length = quill.getSelection().index
      quill.insertEmbed(length, 'download', { href: url, innerText: file.name, target: '_self' }, 'api')
      // 调整光标到最后
      quill.setSelection(length + fileNameLength)
      this.upLoadList()
    },
    upLoadList() {
      var revoke = document.querySelector('.ql-upload') //获取元素
      var Front = document.createElement('i')  //创建元素
      // Front.className = 'el-icon-upload' //新增class属性
      revoke.appendChild(Front) //追加到元素中
    }
  }
}

查看 会遇到样式失效的问题

// 开始直接这样写，发现设置的样式，在查看里面没有了
<div  v-html="content"></div>
// 经过查看资料，加了一些类目，就欧克了
<div class="richTextStyle ql-snow">
    <div class="ql-editor" v-html="lookMessageForm.noticeContent"></div>
</div>

图片位置调整以及改变大小

参考网址

效果图：