vue-quill-editor使用模版

上传图片
上传视频

<template>
    <div>
        <quill-editor
            style="padding-left: 0; padding-top: 0px; margin-top: 0px"
            ref="editorRef"
            v-model="content"
            class="ql-editor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
        />
        <el-dialog
          title="视频上传"
          :visible.sync="dialogVisible"
          width="30%"
          append-to-body
          :before-close="closeDig">
          <el-upload
            v-loading="loading"
            class="upload-demo"
            drag
            action=""
            list-type="video/mp4"
            :before-upload="beforeUpload"
            :on-remove="removefile"
            :limit="1"
            :on-success="handleSuccess"
            :http-request="uploadVoide"
            :file-list="backfile"
            :on-exceed="handleExceed"
            :multiple="multiple"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传mp4且不超过500MB</div>
          </el-upload>
          <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="closeDig">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span> -->
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { Notification, Loading } from "element-ui";
  import { quillEditor } from "vue-quill-editor";
  import { uploadOss } from "@/api/uploadOss";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  //优化图片自定义大小 新建的css文件的保存位置，如不同，需要修改
  import "@/assets/styles/quillEditor.css";
  import imageResize from "quill-image-resize-module";
  Quill.register("modules/imageResize", imageResize);
  import { ImageDrop } from "quill-image-drop-module";
  Quill.register("modules/imageDrop", ImageDrop);
  
  //优化文字大小选项及样式
  var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
  var Size = Quill.import("formats/size");
  Size.whitelist = sizes;
  Quill.register(Size, true);
  // Quill.register(Video, true)
  export default {
    components: {
      quillEditor,
    },
    props: {
        videoPrefix: {
          type: String,
          default: "hos/quillEditor/video"
        },
        imagePrefix: {
          type: String,
          default: "hos/quillEditor/image"
        },
        notUpdate: {
          type: Boolean,
          default: false
        }
    },
    data() {
      return {
        content: undefined,
        dialogVisible: false,
        multiple: false,
        loading: false,
        typelist:["mp4"],
        editorOption: {
          modules: {
            toolbar: {
              container: [
                
              ],
              handlers: {
                image: this.imageUploadOss,
                'video': this.videoUploadOss,
              },
            },
            imageDrop: true, // 拖动加载图片组件。
            imageResize: {
              //调整大小组件。
              displayStyles: {
                backgroundColor: "black",
                border: "none",
                color: "white",
              },
              modules: ["Resize", "DisplaySize", "Toolbar"],
            },
          },
          placeholder: "请输入正文",
        },
        backfile:[]
      };
    },
    created() {
        if(!this.notUpdate){
            this.editorOption.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: sizes }], // 字体大小
                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                // [{ font: ['songti'] }], // 字体种类
                [{ align: [] }], // 对齐方式
                ["clean"], // 清除文本格式
                ["image", "video"], // 链接、图片、视频
            ]
        }else {
            this.editorOption.modules.toolbar.container = []
        }
    },
    methods: {
      tabClick() {
        // 清空内容
        this.content = "";
      },
      initContent(info){
        this.content = info
      },
      // 失去焦点事件
      onEditorBlur(quill) {
        this.$emit('onEditorBlur', quill)
      },
      // 获得焦点事件
      onEditorFocus(quill) {
        this.$emit('onEditorFocus', quill)
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        this.$emit('onEditorReady', quill)
      },
      // 内容改变事件
      onEditorChange({ quill, html, text }) {
        this.$emit('onEditorChange', { quill, html, text })
      },
      imageUploadOss() {
        const { quill } = this.$refs.editorRef;
        let fileInput = quill.container.querySelector("input.ql-image[type=file]");
        if (fileInput === null) {
          fileInput = document.createElement("input");
          fileInput.setAttribute("type", "file");
          // 设置图片参数名
          fileInput.setAttribute("name", "file");
          // 可设置上传图片的格式
          fileInput.setAttribute(
            "accept",
            "image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
          );
          fileInput.classList.add("ql-image");
          // 监听选择文件
          fileInput.addEventListener("change", () => {
            const formData = new FormData();
            formData.append("file", fileInput.files[0]);
            formData.append("imageUrl", this.imagePrefix + "/");
            uploadOss(formData)
              .then((res) => {
                if (res.status === "200") {
                  const length = quill.getSelection(true).index;
                  quill.insertEmbed(
                    length,
                    "image",
                    process.env.VUE_APP_DOMAIN_STATIC + res.result
                  );
                  quill.setSelection(length + 1);
                }
              })
              .catch((err) => {
                console.log(err);
                Notification.error("图片上传失败");
              });
          });
        }
        fileInput.click();
      },
      videoUploadOss(){
        // document.querySelector('#upvideoshow').click()
        this.dialogVisible = true
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件`);
      },
      handleSuccess(res, file, fileList) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log('fileList',fileList)
        console.log(file.raw)
      },
      beforeUpload(file) {
        const typelist = ["video/mp4"];
        var bool = typelist.some((item) => {
          console.log(file.type)
          return item == file.type;
        });
        const isLt2M = file.size / 1024 / 1024 < 500;
        if (!bool) {
          this.$message.error("只能是mp4格式的视频!");
        }
        if (!isLt2M) {
          this.$message.error("上传视频大小不能超过 500MB!");
        }
        return bool && isLt2M;
      },
      removefile(file, fileList) {
        console.log('remove',file)
      },
      uploadVoide(params){
        this.loading = true
        const { quill } = this.$refs.editorRef;
        console.log('uploadVoide params',params)
        const form = new FormData(); // 使用FormData传参数和文件
        form.append("file", params.file); // 文件
        form.append("imageUrl", this.videoPrefix + "/");
        uploadOss(form).then((res) => {
          if (res.status === "200") {
              this.closeDig()
              const length = quill.getSelection(true).index;
              quill.insertEmbed(
                length,
                "video",
                process.env.VUE_APP_DOMAIN_STATIC + res.result
              );
              quill.setSelection(length + 1);
            }
        })
        .catch((err) => {
          console.log(err);
          Notification.error("视频上传失败");
        }).finally(()=> (this.loading = false));
      },
      closeDig(){
        this.backfile = []
        this.dialogVisible = false
      }
    },
  };
  </script>
  <style scoped lang="scss">

  ::v-deep(.ql-tooltip){
      left: 0px!important;
  }
  </style>