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.新建一个文件quil_editor.vue（子组件）

<template>
    <div style="height: 370px;">
        <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)" style="height: 200px;"></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";
// 接口引入
import { qiniurequest } from "@/api/en/upload";
// 七牛引入
import * as qiniu from "qiniu-js";
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",
    props: ['desc'],
    data() {
        return {
            qiniuData: {
                key: "",
                token: ""
            },
            // 七牛云上传储存区域的上传域名（华东、华北、华南、北美、东南亚）
            upload_qiniu_url: "https://upload.qiniup.com/",
            // upload_qiniu_url: "http://upload-z2.qiniup.com",
            // 七牛云返回储存图片的子域名
            upload_qiniu_addr: "http://image.gudsen.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() {
            qiniurequest().then(res => {
                if ((res.code = 100000)) {
                    this.qiniuToken = res.data.data;
                    this.qiniuData.token = res.data.data;
                }
            });
        },
        onEditorChange(editor) {// 内容改变事件
            // console.log("editor focus!", editor);
        },
        onEditorBlur(editor) {// 失去焦点事件
            console.log("editor blur!", editor);
        },
        onEditorReady(editor) {//准备编辑器
            console.log("editor ready!", editor);
        },
        onEditorFocus(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 < 10;
            if (!isJPG && !isPNG) {
                this.$message.error("图片只能是 JPG/PNG 格式!");
                return false;
            }
            if (!isLt2M) {
                this.$message.error("图片大小不能超过 10MB!");
                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);
        }
    },
    watch: {
      desc: function (val) {
        var _this = this
        this.$emit('ievent', _this.desc)
      }
    }
};
</script>

注意
通过props传参，到时提交清空富文本编辑器的时候才可以完成
props: [‘desc’],
watch用来监测Vue实例上的数据变动。

4.页面展示（父组件）

a.引入富文本

import DTextarea from "@/components/en/quill_editor.vue";

b.使用编辑器

components: {
//使用编辑器
  DTextarea
},

c.dom元素

<d-textarea class="textarea" @ievent="ievent" :desc="content"></d-textarea>

b.获取编辑器内容

//获取编辑器编辑的内容
 ievent(data) {
     this.content = data;
 },

注意
当一个页面引入多个这个组件时只需改变这个方法就可以了如