vue-quill-editor 自定义上传图片，自定义文字大小封装

<template>
  <div>
    <el-upload
      class="upload posAbs"
      action="api/wx/file/upload"
      :http-request="handleUpload"
      name="files"
      accept="image/jpeg, image/png, image/jpg"
      :show-file-list="false"
    >
    </el-upload>
    <quill-editor
      v-model="content"
      :options="editorOption"
      @change="onEditorChange"
      ref="QuillEditor"
    >
    </quill-editor>
  </div>
</template>

<script>
import { uploadFile } from "@/api/common";
import _ from "lodash";
import Quill from "quill";
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = [
  "12px",
  "14px",
  "16px",
  "18px",
  "20px",
  "22px",
  "24px",
  "26px"
];
Quill.register(fontSizeStyle, true);//解决字体大小设置多个，配合下面的style样式
export default {
  props: {
    data: Object,
    required: true,
  },
  data() {
    return {
      content: "",//拿到的编辑器里的内容
      editorOption: {
        placeholder: "请在此输入公告内容...",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // toggled buttons
              ["blockquote", "code-block"],
              [{ header: 1 }, { header: 2 }], // custom button values
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }], // superscript/subscript
              [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ align: [] }],
              [{ size: fontSizeStyle.whitelist }], //"image"上传图片入口 // custom dropdown,
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ font: [] }],
              ["link"，"image"],
              
            ],
            handlers: {
              image: value => {
                if (value) {
                  console.log(value, "+2");
                  document.querySelector(".upload input").click();//自定义调起图片
                } else {
                  console.log(value, "+2");
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      }
    };
  },
  created() {
    this.editorOption.modules.toolbar.container[9][1] =this.data&&data.image ;
    console.log(this.data, "this.props");
  },

  methods: {
    handleUpload(params) {//从后端返回的图片地址插入到编辑器里
      let form = new FormData();
      form.append("file", params.file);
      this.$service.common.uploadFile(form).then(res => {
        let quill = this.$refs.QuillEditor.quill;
        this.$emit("content", this.content);
        let index = quill.getSelection().index;
        quill.insertEmbed(index, "image", res.data);
        quill.setSelection(index + 1);
      });
    },
    onEditorChange(e) {
      console.log(e, "+e");
      this.$emit("content", this.content);
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  padding: 25px;
}
/deep/ .ql-container.ql-snow {
  min-height: 260px;
}
/deep/ .quill-editor.ql-snow.ql-editor {
  padding: 0;
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
}

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

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
}
</style>