vue-quill-editor 实现上传图片 视频 图片拖拽 文本对齐等功能

1. 需要安装的插件

npm install quill  vue-quill-editor  quill-image-drop-module quill-image-resize-module -s

 

 

实现的源码在下面，可直接封装成组件使用

<template>
    <div class="ql-container">
        <quill-editor
            v-model="content"
            ref="myquillEditor"
            :options="editorOption"
        ></quill-editor>
        <input
            id="uploadImg"
            type="file"
            style="display:none"
            accept="image/png, image/jpeg, image/gif"
            @change="uploadImage"
        />
        <input
            id="uploadVideo"
            type="file"
            style="display:none"
            accept="video/*"
            @change="uploadVideo"
        />
    </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Vue from "vue";
import * as quill from "quill"; //引入编辑器
import VueQuillEditor from "vue-quill-editor";
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";

Vue.use(VueQuillEditor /* { default global options } */);

quill.register("modules/imageDrop", ImageDrop);
quill.register("modules/imageResize", ImageResize);

const BlockEmbed = quill.import("blots/block/embed");
// 处理视频显示，video兼容小程序中显示
class VideoBlot extends BlockEmbed {
    static create(value) {
        let node = super.create();
        node.setAttribute("src", value.url);
        node.setAttribute("controls", value.controls);
        node.setAttribute("width", value.width);
        node.setAttribute("height", value.height);
        node.setAttribute("webkit-playsinline", true);
        node.setAttribute("playsinline", true);
        node.setAttribute("x5-playsinline", true);
        return node;
    }

    static value(node) {
        return {
            url: node.getAttribute("src"),
            controls: node.getAttribute("controls"),
            width: node.getAttribute("width"),
            height: node.getAttribute("height")
        };
    }
}
VideoBlot.blotName = "simpleVideo";
VideoBlot.tagName = "video";
quill.register(VideoBlot);

//quill编辑器的字体
let fonts = [
    "SimSun",
    "SimHei",
    "M