vue-quill-editor自定义及视频相关

vue-quill-editor 富文本编辑器上传视频_vue-quill-editor上传视频_＊且听风吟的博客-CSDN博客

vue+elementui+自定义Vue-Quill-Editor富文本框（一）_quill-editor 行间距-CSDN博客

<template>
  <div class="quill-edit-container">
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      @change="onEditorChange"
    />
    <el-upload
      action="#"
      :before-upload="beforeUploadVideo"
      name="files"
      class="pictureQuillVideo"
      :on-success="handleVideoSuccess"
      :show-file-list="false"
      style="display: none"
      :http-request="uploadfile"
    />
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import * as Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 行高
import { lineHeightStyle } from './lineHeight.js'
Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)
// 行间距
import { letterSpacingStyle } from './letterSpacing.js'
Quill.register({ 'formats/letterSpacing': letterSpacingStyle }, true)
// 视频
import Video from './video.js'
Quill.register(Video, true)
export default {
  name: 'EpRichTextEditor',
  components: {
    quillEditor
  },
  props: {
    defaultContent: {
      type: String,
      default: '<p>请输入</p>'
    }
  },
  data() {
    return {
      // action: process.env.VUE_APP_API_BASE_URL + '/sp/news/upload',
      action: 'http://localhost:8080/sp/news/upload',
      uploadheader: {
        // 'Authorization': 'Bearer ' + store.state?.loginUserInfo?.token || null,
      },
      content: '',
      editorOption: {
        placeholder:'请输入内容',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'], // 引用，代码块

              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: 'ordered' }, { list: 'bullet' }], // 列表
              [{ script: 'sub' }, { script: 'super' }], // 上下标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ direction: 'rtl' }], // 文本方向

              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题

              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              [{ font: [] }], // 字体
              [{ align: [] }], // 对齐方式
              [{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }], //行高
              [{ letterSpacing: [ 'initial','2px','4px', '6px','8px','10px', '12px', '14px', '16px'],},], //行间距
              ['clean'], // 清除字体样式
              ['image', 'video'] // 上传图片、上传视频
            ],
            handlers: {
              letterSpacing: function (value) {
                if (value) {
                  this.quill.format('letterSpacing', value)
                } else {
                  console.log(value)
                }
              },
              lineheight: function (value) {
                if (value) {
                  this.quill.format('lineHeight', value)
                } else {
                  console.log(value)
                }
              },
              video: function (value) {
                if (value) {
                  document.querySelector('.pictureQuillVideo input').click()
                } else {
                  this.quill.format('video', false)
                }
              },
            }
          }
        },
        theme: 'snow',
        imageResize: {}
      },
      //视频
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: '',
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: '',
      },
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted(){

    // 富文本工具栏提示
    addQuillTitle()
    //解决文本框赋值后获取焦点
    this.$refs.myQuillEditor.quill.enable(false)
    this.$nextTick(function () {
      this.$refs.myQuillEditor.quill.enable(true)
      this.$refs.myQuillEditor.quill.blur()
    })
  },
  methods: {
    /** --------- 视频上传相关 start ---------  */
    insertVideoLink (videoLink) {
      console.log('insertVideoLink');
      if (!videoLink) return this.$message.error('视频地址不能为空！')
      this.videoForm.show = false
      let quill = this.$refs['myQuillEditor'].quill
      // 获取富文本
      let range = quill.getSelection()
      // 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null
      let index = range ? range.index : 0
      // 在光标所在位置 插入视频
      quill.insertEmbed(index, 'video', videoLink)
      // 调整光标到最后
      quill.setSelection(index + 1)
    },
    async uploadfile(file) {
      let form = new FormData();
      this.loading = true;
      // 调用后端服务器的接口
      form.append('files', file.file);
      let res = await this.$api.uploadNewsFile2(form);  //此方法返回上传后的id
      if (res.code==200) {
        let filePath = ' http://172.16.100.93:8080/sp/news/downloadFile/'+ res.data
        this.insertVideoLink(filePath)
      }
    },
    //富文本上传视频回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb',
          'video/mov',
        ].indexOf(file.type) == -1
      ) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$message.error('视频大小不能超过50MB')
        return false
      }
      this.isShowUploadVideo = false
    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange() {
      this.$emit('onChange', this.content)
    } // 内容改变事件
  },
  watch: {
    defaultContent: {
      handler(newValue) {
        this.content = newValue
      }
    }
  }
}
</script>

<style lang="scss">
.quill-edit-container {
  height: 100%;

  // .ql-editor {
  //   min-height: 200px;
  // }
}

p {
  margin: 10px;
}

// .edit_container,
.quill-editor {
  height: calc(100% - 86px);
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
.ql-snow .ql-picker-label{
  padding-right: 20px;
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
  content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="行高"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
  content: '默认';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
  content: '1px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
  content: '1.5px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.75"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
  content: '1.75px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
  content: '2px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
  content: '3px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
  content: '4px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5px';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}

.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item::before {
  content: '字符间距';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="字符间距"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='initial']::before {
  content: '默认';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="2px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='2px']::before {
  content: '2px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="4px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='4px']::before {
  content: '4px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="6px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='6px']::before {
  content: '6px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='8px']::before {
  content: '8px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='10px']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='12px']::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='14px']::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='16px']::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-letterSpacing {
  width: 90px;
}
</style>

内容参考开头两篇文章，js文件参考第一篇文章中的js