富文本插件 quill

插件文档  Quill官方中文文档 · 看云

 引入quill 之后

main.js

// 富文本组件
import Editor from "@/components/Editor"
Vue.component('Editor', Editor)

 

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="upload"
      v-if="this.type == 'url'"
    >
    </el-upload
    ><el-upload
      :action="uploadUrlVideo"
      :before-upload="handleBeforeUploadVideo"
      :on-success="handleUploadSuccessVideo"
      :on-error="handleUploadError"
      name="fileupload"
      :show-file-list="false"
      :headers="headers"
      ref="uploadVideo"
      v-if="this.type == 'url' && videoVal"
    >
    </el-upload>
    <div class="editor" ref="editor" :style="styles"></div>
  </div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//getToken 为获取token
import { getToken } from "@/utils/auth";
const SizeStyle = Quill.import("attributors/style/size");
SizeStyle.whitelist = ["12px", "14px", "16px", "18px", "24px", "32px"];
Quill.register(SizeStyle, true);
export default {
  name: "Editor",
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    /* 类型（base64格式、url格式） */
    type: {
      type: String,
      default: "url",
    },
    videoVal: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      uploadUrl: