proginn-frontend/components/editor.vue

<template>
  <div class="my-editor">
    <div
      class="quill-editor"
      :content="content"
      @change="handleChange"
      v-quill:myQuillEditor="editorOption"
    ></div>
    <input type="file" id="imgInput" @change="handleContentFileChange" style="display: none;" />
  </div>
</template>

<script>
import Vue from "vue";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
// import 'quill/dist/quill.bubble.css'
if (process.browser) {
  const VueQuillEditor = require("vue-quill-editor/dist/ssr");
  Vue.use(VueQuillEditor);
}
import hljs from "hljs";
export default {
  props: ["content"],
  components: {
    // quillEditor
    // Editor
  },
  data() {
    return {
      editorOption: {
        theme: "snow",
        placeholder: "请输入正文...",
        modules: {
          toolbar: [
            ["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] }],
            [{ font: [] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ["clean"],
            ["link", "image"]
          ],
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      }
    };
  },
  computed: {},
  mounted() {
    // 为图片ICON绑定事件  getModule 为编辑器的内部属性
    this.myQuillEditor
      .getModule("toolbar")
      .addHandler("image", this.imgHandler);
    // this.myQuillEditor
    //   .getModule("toolbar")
    //   .addHandler("video", this.videoHandler); // 为视频ICON绑定事件
  },
  methods: {
    handleChange(e) {
      this.$emit("change", e.html);
    },
    // 点击图片ICON触发事件
    imgHandler(state) {
      this.addRange = this.myQuillEditor.getSelection();
      if (state) {
        let fileInput = document.getElementById("imgInput");
        fileInput.click(); // 加一个触发事件
      }
      this.uploadType = "image";
    },

    // 点击视频ICON触发事件
    videoHandler(state) {
      this.addRange = this.myQuillEditor.getSelection();
      if (state) {
        let fileInput = document.getElementById("imgInput");
        fileInput.click(); // 加一个触发事件
      }
      // this.uploadType = "video";
    },
    handleContentFileChange(e) {
      const file = e.target.files[0];
      if (file.size / 1024 > 500) {
        this.$message.error("图片大小不得超过500k，请重新选择");
        return false;
      }
      const formData = new FormData();
      formData.append("file", file);
      formData.append("original_filename", file.name);
      this.$axios
        .$post(`/upload_image`, formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          this.$emit(
            "change",
            this.content + `<img src="${res.filename}" alt="${file.name}"/>`
          );
        });
    }
  }
};
</script>

<style lang="scss">
.my-editor {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 244px;
  background: #fff;
  .ql-toolbar {
    border-width: 0 !important;
  }
  .ql-editor,
  .quill-editor {
    min-height: 244px;
    border: 0 !important;
    font-size: 14px;
    line-height: 25px;
  }
  .ql-snow.ql-toolbar::after {
    display: inline-block;
  }
}
</style>