VUE——基于Element、quillEditor和VueCropper的富文本图片剪切上传

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40735186/article/details/85245283

我们要实现的功能如下：

步骤一、上传图片

步骤二、剪切图片

步骤三、生成新图片

安装组件：我使用Yarn

yarn add vue-quill-editor quill vue-cropper
或者使用npm
npm install -d vue-quill-editor quill vue-cropper

element组件请自行下载并引入

实现代码如下：

第一部分：综合组件部分，本文件放置余conponent文件夹下，名为textEditor.vue：

<template>
    <div>
      <!-- 图片上传组件-->
      <el-upload
        accept="image/*"
        action="192.168.0.108/api/subject/file/upload"
        class="avatar-uploader"
        name="upload"
        :show-file-list="false"
        :before-upload="beforeUpload">
        <el-button size="small" type="primary">点击上传图片 到 文本编辑器</el-button>
      </el-upload>
      <!-- 编辑器组件-->
      <quill-editor 
        class="editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @change="onEditorChange($event)">
      </quill-editor>
      <!-- 图片裁剪组件-->
      <el-dialog top="5vh" :visible.sync="isShowCropper">
        <VueCropper
          style="height:600px;margin:20px 0"
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
        >
        </VueCropper>
        <br/>
        <el-button type="primary" @click="onCubeImg()">生成图片</el-button>
        <el-button @click="isShowCropper = false">取消</el-button>
      </el-dialog>
    </div>
  </template>
  <script>
  // 富文本工具栏配置
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、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] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除文本格式
    ["link", "image", "video"] // 链接、图片、视频
  ];
  
  import { quillEditor } from "vue-quill-editor";
  import { VueCropper } from "vue-cropper";
  import { ApiUploadFile } from '../api';
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  
  export default {
    name: 'textEditor',
    components: {
      quillEditor,
      VueCropper
    },
    props: {
      /*编辑器的内容*/
      value: {
        type: String
      },
      /*图片大小*/
      maxSize: {
        type: Number,
        default: 4000 //kb
      }
    },
    data() {
      return {
        // 富文本数据
        content: this.value,
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        editorOption: {
          placeholder: "",
          theme: "snow", // or 'bubble'
          placeholder: "请输入您想输入的内容",
          modules: {
            toolbar: {
              container: toolbarOptions,
              // container: "#toolbar",
              handlers: {
                image: function(value) {
                  console.log(value)
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector(".avatar-uploader input").click();
                  } else {
                    this.quill.format("image", false);
                  }
                },
              }
            }
          }
        },
        // 切图器数据
        option: {
          img: '',                         // 裁剪图片的地址
          info: true,                      // 裁剪框的大小信息
          outputSize: 1,                   // 裁剪生成图片的质量
          outputType: 'png',               // 裁剪生成图片的格式
          canScale: false,                 // 图片是否允许滚轮缩放
          autoCrop: true,                  // 是否默认生成截图框
          autoCropWidth: 150,              // 默认生成截图框宽度
          autoCropHeight: 150,             // 默认生成截图框高度
          fixed: false,                    // 是否开启截图框宽高固定比例
          fixedNumber: [4, 4],             // 截图框的宽高比例
        },
        isShowCropper: false,
      };
    },
    methods: {
      // 上传切图前调用
      beforeUpload(file) {
        this.option.img = URL.createObjectURL(file);
        this.option.autoCropWidth = this.width;
        this.option.autoCropHeight = this.height;
        this.isShowCropper = true;
        return false;
      },
      // 确定裁剪图片
      onCubeImg() {
        // 获取cropper的截图的base64 数据
        this.$refs.cropper.getCropData(data => {
          this.isShowCropper = false
          // 先将显示图片地址清空，防止重复显示
          this.option.img = ''
          // 将剪裁后base64的图片转化为file格式
          let file = this.convertBase64UrlToBlob(data)
          file.name = 'img' + new Date().getTime();
          // 将剪裁后的图片执行上传
          var fd = new FormData();
          fd.append("file", file);
          this.$message.success("图片正在上传");
          ApiUploadFile(fd).then(res => {
            // 获取富文本组件实例
            this.$message.success("图片上传成功");
            let quill = this.$refs.myQuillEditor.quill;
            // loading动画消失
            this.quillUpdateImg = false;
            // 如果上传成功
            if (res.data.code == 0) {
              // 获取光标所在位置
              if (quill.getSelection()&&quill.getSelection().index) {
                let length = quill.getSelection().index;
              }else{
                let length = 0;
              }
              // 插入图片  res.url为服务器返回的图片地址
              console.log(res)
              quill.insertEmbed(length, "image", res.data.data.imageUrl);
              // 调整光标到最后
              quill.setSelection(length + 1);
            } else {
              this.$message.error("图片插入失败");
            }
          })
        })
      },
      // 将base64的图片转换为file文件
      convertBase64UrlToBlob(urlData) {
        let bytes = window.atob(urlData.split(',')[1]);//去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        let ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], { type: 'image/png' });
      },
      onEditorChange() {
        //富文本内容改变事件
        this.$emit("input", this.content);
      },
    }
  };
</script> 
  
<style>
  .avatar {
    width: 80%;
    height: 80%;
  }
  .editor {
    line-height: normal !important;
    height: 500px;
    margin-top: 10px;
  }
  .editor img {
    width: 200px;
  }
  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 1px;
  }
  .ql-video {
    display: none !important;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
  
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
  
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
  
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '标题类型';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }
  
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
</style>

第二部分：调用代码，本文件放置于page目录的子文件夹下

<template>
  <div class="inputwrapper">
    <el-form :model="formData" ref="formData" label-width="100px" class="demo-ruleForm">
        <el-form-item
          style="width: 900px"
          label="标题"
          prop="title"
          :rules="[
            { required: true, message: '标题不能为空'}
          ]"
        >
          <el-input type="text" v-model="formData.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          style="width: 900px"
          label="详情"
          prop="detail"
          :rules="[
            { required: true, message: '详情不能为空'}
          ]"
        >
          <el-input type="text" v-model="formData.detail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item 
          label="编辑器"
          style="width: 900px"
        >
          <textEditor v-model="formData.content"/>
        </el-form-item>
        <el-form-item style="margin-top: 90px">
          <el-button type="primary" @click="submitForm('formData')">提交</el-button>
          <el-button @click="resetForm('formData')">重置</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
  import textEditor from '../../components/textEditor.vue';
  export default {
    components: {
      textEditor
    },
    data() {
      return {
        formData: {
          title: '',
          detail: '',
          content: '',
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formData)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  }
</script>

以上为所有代码，欢迎朋友们使用。

参考文章：https://www.jianshu.com/p/21dab85b7fa8。欢迎指正。