vue中使用富文本编辑器上传图片到七牛云

• Z时代
• 2024-01-10
• 分类：综合

vue富文本编辑器" title="vue富文本编辑器">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>

以上是 vue中使用富文本编辑器上传图片到七牛云 的全部内容， 来源链接： utcz.com/z/380019.html