封装VueQuillEditor并实现双向数据绑定与图片自定义上传（自定义图片大小）

最近接到一个需求，需要使用VueQuillEditor富文本编辑器，实现图片上传到oss服务器，并能够自定义图片的大小（拉伸），考虑到系统中使用该组件的地方非常多，所以花了些时间进行了封装。

要求全局中不需要对该组件进行单独引用，且再使用时只需要通过v-modle进行双向绑定就可，图片可在富文本中自定义拉伸，缩放，图片上传后直接插入到光标位置。

组件使用时：

<VueQuill v-model="ruleForm.industry_content"></VueQuill>

看起来是不是特别简单与方便？接下来就定义我们的组件。

下载 VueQuillEditor 与 imageResize

npm install vue-quill-editor -s 富文本主体
quill-image-resize-module -s 自定义大小

并在main.js 文件中引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

创建并全局注册我们的组件

公用组件文件下新建 VueQuillEditor 文件夹，并在 VueQuillEditor 文件夹下新增 index.js 与 index.vue 文件。

file >>>>> index.js

import QuillEditorfrom './index.vue'
const newQuillEditor= {
    install: function(Vue) {
        Vue.component('VueQuill', QuillEditor)
    }
}
export default newQuillEditor

file >>>>> index.vue

<template>
    <div>
        <el-upload
                        class="avatar-uploader"
                        :action="pload"
                        :show-file-list="false"
                        style="display:none"
                        ref ='upload'
                        accept=".jpg,.jpeg,.png,.bmp,.JPG,.JPEG,.PBG,.BMP"
                        :http-request="handleChange">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
        <quill-editor v-model="content" ref="QuillEditor" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
    </div>
</template>
<script>
import { request } from '@/api/service'
// 请求方法引入
const OSS = require('ali-oss')
// oss引入

import VueQuillEditor, { Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
//组件依赖
// 工具栏
const toolbarOptions = [
    [{ color: [] }, { background: [] }],
    ["bold", "italic", "underline", "strike"],
    [{ size: ["small", false, "large"] }],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ script: "sub" }, { script: "super" }],
    [{ indent: "-1" }, { indent: "+1" }],
    [{ direction: "rtl" }],
    [{ header: 1 }, { header: 2 }],
    ["link", "image"],
    ["link"],
    ["blockquote", "code-block"],
    [{ font: [] }],
    [{ align: [] }],
];
export default {
    name:"VueQuillEditor",
    props:{
      value:{
        type: String,
        default:""
      }
  },
  watch:{
    value(val) {
            this.content = val;
    },
  },
  // 通过watch / props /$emit 实现双向绑定
  // 通过watch / props /$emit 实现双向绑定
  // 通过watch / props /$emit 实现双向绑定
  
    data(){
        return{
                content:'',
                pload:'123',
                fileList:[],
                client:null,
                editorOption: {                
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        document.querySelector('.el-upload').click()
                                        //触发element upload 单机事件
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        },
                        imageResize: {
                            displayStyles: {
                                backgroundColor: 'black',
                                border: 'none',
                                color: 'white'
                            },
                            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
                        }
                    }
                }
        }
    },
    created(){
        this.getOssInfo()
    },
    methods:{
        onEditorChange(e){
            this.$emit("input",e.html);
        },
        // 通过覆盖upload组件默认上传行为触发该事件
        handleChange(file){
            const OSSClient = new OSS({
                        accessKeyId: this.client.ACCESS_KEY_ID,
                        accessKeySecret: this.client.ACCESS_KEY_SECRET,
                        bucket: this.client.BUCKET, // utility
                        secure: true,
                        region: 'oss-cn-shanghai', // todo
                    })
            OSSClient.put(this.client.FOLDER+file.file.name,file.file).then(res=>{
                // res.url 是上传成功后的图片网络地址
                let quill = this.$refs.QuillEditor.quill
                let length = quill.getSelection().index;
                //向富文本内容中插入图片
                quill.insertEmbed(length, 'image', res.url)
                // 移动焦点光标位置
                quill.setSelection(length + 1)
            })
        },
        // 获取oss上传需求信息
        getOssInfo(){
          request({
            url:'/admin/Util/aliyOss.html',
            method:'post'
          }).then(res=>{
             this.client = res
          })
        },
    }
}
</script>

定义好了我们需要的组件，去 main.js 中引用，并全局注册

import VueQuill from '@/components/user-common/VueQuillEditor/index'
Vue.use(VueQuill)

然后就可以在组件中使用了

<VueQuill v-model="ruleForm.industry_content"></VueQuill>

效果：