vue中使用富文本編輯器上傳圖片到七牛雲

使用富文本插件 vue-quill-editor

步驟：1.下載插件  

npm install vue-quill-editor --save

 

2.全局引入，也可以局部引入

 

import Vue from 'vue'

import VueQuillEditor from 'vue-quill-editor'

 

// require styles

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

 

Vue.use(VueQuillEditor）

3.全部代碼

<template>
  <div>
    <el-form>
      <el-form-item>
        <el-upload
          v-show="false"
          class="avatar-uploader"
          :action="upload_qiniu_url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          :data="qiniuData"
          :file-list="fileList"
          list-type="picture"
        >
        </el-upload>
      </el-form-item>
    </el-form>

    <quill-editor
      v-model="desc"
      ref="myTextEditor"
      class="editer"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
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] }],
  [{ font: [] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ["clean"],
  ["link", "image", "video"]
];
export default {
  name: "quilleditor",
  data() {
    return {
      qiniuData: {
        key: "",
        token: ""
      },
      // 七牛雲上傳儲存區域的上傳域名（華東、華北、華南、北美、東南亞）
      upload_qiniu_url: "http://upload-z2.qiniup.com",
      // 七牛雲返回儲存圖片的子域名
      upload_qiniu_addr: "http://七牛雲配置域名.com/",
      imageUrl: "",
      qiniuToken: "",
      fileList: [],
      desc: "",
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具欄
            handlers: {
              image: function(value) {
                console.log("value  ", value);
                if (value) {
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          },
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      },
      qiniuData: {
        token: ""
      },
      qiniuToken: "",
      url: "",
      imageUrl: "",
      quillUpdateImg: false
    };
  },
  mounted() {
    this.getQiniuToken();
  },
  components: { quillEditor },
  methods: {
　　//獲取七牛雲token
    getQiniuToken() {
      this.$http.get("/qiNiu/manage").then(({ data: res }) => {
        console.log(res);
        this.qiniuToken = res.token;
        this.qiniuData.token = res.token;
      });
    },
    onEditorChange(editor) {
      // console.log("editor focus!", editor);
    },
    onEditorBlur(editor) {
      console.log("editor blur!", editor);
    },
    onEditorReady(editor) {
      console.log("editor ready!", editor);
    },
    beforeUpload() {
      // 顯示loading動畫
      this.getQiniuToken();
      this.quillUpdateImg = true;
    },
    uploadError() {
      // loading動畫消失
      this.quillUpdateImg = false;
      this.$message.error("圖片插入失敗");
    },

 　　　//富文本插入網絡圖片

　　　onLinkImageUrl() {

      　　var imageurl = document.querySelector(".url-image-fuzhu input").value;

      　　let quill = this.$refs.myTextEditor.quill;

      　　let length = quill.getSelection().index;

      　　quill.insertEmbed(length, "image", imageurl);

      　　quill.setSelection(length + 1);

    },

    beforeAvatarUpload: function(file) {
      this.qiniuData.key = file.name;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("圖片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("圖片大小不能超過 2MB!");
        return false;
      }
    },
    handleAvatarSuccess: function(res, file) {
      console.log(res);
      this.imageUrl = this.upload_qiniu_addr + res.key;
      let data = this.imageUrl;
      let quill = this.$refs.myTextEditor.quill;
      // 如果上傳成功
      // 獲取光標所在位置
      let length = quill.getSelection().index;
      // 插入圖片  res.info為服務器返回的圖片地址
      quill.insertEmbed(length, "image", data);
      // 調整光標到最后
      quill.setSelection(length + 1);

      // this.$message.error('圖片插入失敗')
      // loading動畫消失
      this.quillUpdateImg = false;
      console.log(this.imageUrl);
    },
    handleError: function(res) {
      this.$message({
        message: "上傳失敗",
        duration: 2000,
        type: "warning"
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>