<template>
  <div>
    <div style="height: 0px; overflow: hidden">
      <fileUpload
        v-if="showFileUpload"
        :multiple="true"
        :limit="10000"
        :uid="uid"
        @getFiles="getFiles"
      />
    </div>
    <quill-editor
      v-model="center"
      ref="myQuillEditor1"
      :options="options"
      @focus="onEditorFocus($event)"
    ></quill-editor>
  </div>
</template>

<script>
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 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: [] }],
  ["link", "image", "video"],
];
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import fileUpload from "@/components/file-upload";
import uploadFile from "@/utils/upload-file.js";
export default {
  name: "v-quill-editor",
  components: { quillEditor, fileUpload },
  props: {
    value: {
      type: [String, Number, Object, Array],
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      uid: `class_${Math.random().toFixed(6).slice(-6)}`,
      showFileUpload: true,
      editorImages: [],
      center: this.value,
      options: {
        placeholder: "请输入内容",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: (value) => {
                if (value) {
                  document.querySelector(`.${this.uid} input`).click();
                }
              },
            },
          },
          clipboard: {},
        },
      },
    };
  },
  watch: {
    value() {
      this.center = this.value;
    },
    center() {
      this.$emit("input", this.center);
    },
  },
  mounted() {
    //  自定义粘贴图片功能
    let quill = this.$refs.myQuillEditor1.quill;
    quill.root.addEventListener(
      "paste",
      (evt) => {
        if (
          evt.clipboardData &&
          evt.clipboardData.files &&
          evt.clipboardData.files.length
        ) {
          evt.preventDefault();
          [].forEach.call(evt.clipboardData.files, (file) => {
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
              return;
            }
            uploadFile(file, (data) => {
              let length = quill.getSelection().index;
              quill.insertEmbed(
                length,
                "image",
                this.$imageUrl + data.aliyunAddress
              );
              quill.setSelection(length + 1);
            });
          });
        }
      },
      false
    );
  },
  methods: {
    getFiles(fileList) {
      fileList.forEach((item) => {
        this.editorImages.push(item.url);
      });
      this.showFileUpload = false;
      this.$nextTick(() => {
        this.showFileUpload = true;
      });
      this.showImage1();
    },
    showImage1() {
      let quill = this.$refs.myQuillEditor1.quill;
      this.editorImages.forEach((item) => {
        let length = quill.getSelection().index;
        quill.insertEmbed(length, "image", item);
        quill.setSelection(length + 1);
      });
      this.editorImages = [];
    },
    onEditorFocus(event) {
      if (this.disabled) {
        event.enable(false);
      }
      event.enable(true);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .edit_container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
::v-deep .ql-editor {
  height: 400px;
}
</style>
