proginn-frontend/components/editor.vue

<template>
  <div class="my-editor">
    <div
      class="quill-editor"
      :content="content"
      :placeholder="placeholder || ''"
      @change="handleChange"
      v-quill:myQuillEditor="editorOption"
    ></div>
    <input type="file" id="imgInput" @change="handleContentFileChange" style="display: none;" />
    <el-dialog title="提示" :visible.sync="linkDialog" :before-close="handleLinkClose">
      <el-form :model="link">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="link.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="link.url" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleLinkClose">取 消</el-button>
        <el-button type="primary" @click="handleLinkOk">确 定</el-button>
      </span>
    </el-dialog>
  </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", "hideImage", "placeholder", "haveVideo"],
  components: {
    // quillEditor
    // Editor
  },
  data() {
    const extra = ["link"];
    if (!this.hideImage) {
      extra.push("image");
    }
    if (this.haveVideo) {
      extra.push("video");
    }
    let placeholder = this.placeholder
    return {
      editorOption: {
        theme: "snow",
        placeholder: 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"],
            extra
          ],
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      },
      formLabelWidth: "60px",
      linkDialog: false,
      link: {
        title: "",
        url: ""
      }
    };
  },
  computed: {},
  mounted() {
    // 为图片ICON绑定事件  getModule 为编辑器的内部属性
    this.myQuillEditor
      .getModule("toolbar")
      .addHandler("image", this.imgHandler);
    // this.myQuillEditor
    //   .getModule("toolbar")
    //   .addHandler("link", this.linkHandler);
    // this.myQuillEditor
    //   .getModule("toolbar")
    //   .addHandler("video", this.videoHandler); // 为视频ICON绑定事件
  },
  methods: {
    handleChange(e) {
      if (typeof e.html === "undefined") {
        return;
      }
      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";
    },
    // 点击link触发事件
    linkHandler(state) {
      const selectedRange = this.myQuillEditor.getSelection();
      const selectedText = this.myQuillEditor.getText(
        selectedRange.index,
        selectedRange.length
      );
      console.log(state, selectedText);
      this.link = {
        title: selectedText,
        url: selectedText,
        ...selectedRange
      };
      this.linkDialog = true;
    },
    handleLinkClose() {
      this.linkDialog = false;
      this.link = {
        title: "",
        url: ""
      };
    },
    handleLinkOk() {
      const link = this.link;
      this.myQuillEditor.deleteText(link.index, link.length);
      this.myQuillEditor.insertEmbed(link.index, "link", {
        href: link.url,
        innerText: link.title
      });
      // this.myQuillEditor.insertText(
      //   link.index,
      //   `<a href="${this.link.url}">${this.link.title}</a>`
      // );
      this.handleLinkClose();
    },
    // 点击视频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 => {
          const index = this.myQuillEditor.selection.savedRange.index;
          this.myQuillEditor.insertEmbed(index, "image", res.filename);
          // 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>