关于前端:quill富文本编辑器

<template>
  <div class="contentBox">
   
    <!-- 图片上传组件辅助 -->
    <!-- 留神 quill 默认的图片上传办法限度图片大小，几兆的图片间接报错，所以采纳 elementUI 的图片上传组件将图片先上传到本地，再赋值到 Qill-Editor 的图片上传函数中 -->
    <el-upload
      class="uploaders"
      multiple
      :limit="5"
      :action="serverUrl"
      :headers="header"
      :data="data"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
      class="ql-snow ql-editor"
    ></quill-editor>
    <el-button :plain="true" class="warning" @click="warningFn" style="display:none"></el-button>
  </div>
</template>

<script>
import Quill from "quill";

let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = [
  "18px",
  "20px",
  "22px",
  "24px",
  "26px",
  "28px",
  "30px",
  "32px"
];
Quill.register(fontSizeStyle, true);

const toolbarOptions = [["bold", "italic", "underline"],
  [{header: 1}, {header: 2}],
  [{list: "ordered"}, {list: "bullet"}],
  [{indent: "-1"}, {indent: "+1"}],
  [{direction: "rtl"}],
  [{size: fontSizeStyle.whitelist}],
  [{header: [1, 2, 3, 4, 5, 6, false] }],
  [{color: [] }],
  [{font: [] }],
  [{align: [] }],
  ["link", "image"]
 ]
 export default {
    props: {
        editorValue: {type: [Number, Object, Array, String],
            default: ''
        }
    },
  data() {
   return {
    quillUpdateImg: false, // 依据图片上传状态来确定是否显示 loading 动画，刚开始是 false, 不显示
    content: null,

    editorOption: {
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
      toolbar: {
       container: toolbarOptions,
       handlers: {'image': function (value) {if (value) {
          // 触发 upload 抉择图片文件
          document.querySelector('.uploaders input').click()} else {// formate('name',value) 这里是设置图片为空
          this.quill.format('image', false);
         }
        }
       }
      }
     }
    },
    serverUrl: window.location.origin  + "/sys/base/file/upload", // 这里写你要上传的图片服务器地址
     header: {  // 这里是把图片上传到你我的项目服务器时的申请头配置
        Authorization: 'bearer' + this.$auth.getToken(),
        TenantKey: '2715972430958149632'
    },
    data: { // 这里是把图片上传到你我的项目服务器时的申请参数配置
          type: 4
    }
   }
  },
  mounted(){this.content= this.editorValue},
  watch:{
    editorValue:{handler(newVal){this.content = newVal},
       immediate: true,
    },
    content:{handler(newVal){this.$emit('getSonContent', newVal)
      },
       immediate: true,
    }
  },
  methods: {onEditorChange({html, text}) {// 内容扭转事件 
    if(text.length>1001){document.querySelector('.warning').click()}else{this.content = html}   
   },
   // 富文本图片上传前
   beforeUpload() {
    // 显示 loading 动画
    this.quillUpdateImg = true
   },
  
   uploadSuccess(res) {
    // res 为图片服务器返回的数据
    // 获取富文本组件实例
    let quill = this.$refs.myQuillEditor.quill
    // 如果上传胜利
    if (res.resultCode == 200) {
     // 获取光标所在位置
     let length = quill.getSelection().index;
     // 插入图片 res.url 为服务器返回的图片地址
     quill.insertEmbed(length, 'image', res.resultData.fileUrl)
     // 调整光标到最初
      quill.setSelection(length + 1)
    } else {this.$message.error('图片上传失败')
    }
    // loading 动画隐没
    this.quillUpdateImg = false
   },
   // 富文本图片上传失败
   uploadError() {
    // loading 动画隐没
    this.quillUpdateImg = false
    this.$message.error('图片插入失败')
   },
   warningFn(){this.$message.error('字符个数不能超过 1000');
   }
  }
 }

</script>

<style lang="scss" >
.required{
    // content: '*';
    color: red;
    font-size: 12px;
    height: 12px;
}
  .uploaders{display: none;}
  .ql-container.ql-snow {
      line-height: normal !important;
      height: 250px !important;
      font-size: 14px;
    }

 .ql-snow {.ql-tooltip[data-mode="link"]::before {content: "请输出链接地址:";}
      .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保留";
        padding-right: 0px;
      }
      .ql-tooltip[data-mode="video"]::before {content: "请输出视频地址:";}
      .ql-picker.ql-size {.ql-picker-label[data-value="12px"]::before,
        .ql-picker-item[data-value="12px"]::before {content: "12px";}
        .ql-picker-label[data-value="14px"]::before,
        .ql-picker-item[data-value="14px"]::before {content: "14px";}
        .ql-picker-label[data-value="16px"]::before,
        .ql-picker-item[data-value="16px"]::before {content: "16px";}
        .ql-picker-label[data-value="18px"]::before,
        .ql-picker-item[data-value="18px"]::before {content: "18px";}
        .ql-picker-label[data-value="20px"]::before,
        .ql-picker-item[data-value="20px"]::before {content: "20px";}
        .ql-picker-label[data-value="22px"]::before,
        .ql-picker-item[data-value="22px"]::before {content: "22px";}
        .ql-picker-label[data-value="24px"]::before,
        .ql-picker-item[data-value="24px"]::before {content: "24px";}
        .ql-picker-label[data-value="26px"]::before,
        .ql-picker-item[data-value="26px"]::before {content: "26px";}
        .ql-picker-label[data-value="28px"]::before,
        .ql-picker-item[data-value="28px"]::before {content: "28px";}
        .ql-picker-label[data-value="30px"]::before,
        .ql-picker-item[data-value="30px"]::before {content: "30px";}
        .ql-picker-label[data-value="32px"]::before,
        .ql-picker-item[data-value="32px"]::before {content: "32px";}
        .ql-picker-label[data-value="34px"]::before,
        .ql-picker-item[data-value="34px"]::before {content: "34px";}
        .ql-picker-label[data-value="36px"]::before,
        .ql-picker-item[data-value="36px"]::before {content: "36px";}
      }
      .ql-picker.ql-header {
        .ql-picker-label::before,
        .ql-picker-item::before {content: "文本";}
        .ql-picker-label[data-value="1"]::before,
        .ql-picker-item[data-value="1"]::before {content: "题目 1";}
        .ql-picker-label[data-value="2"]::before,
        .ql-picker-item[data-value="2"]::before {content: "题目 2";}
        .ql-picker-label[data-value="3"]::before,
        .ql-picker-item[data-value="3"]::before {content: "题目 3";}
        .ql-picker-label[data-value="4"]::before,
        .ql-picker-item[data-value="4"]::before {content: "题目 4";}
        .ql-picker-label[data-value="5"]::before,
        .ql-picker-item[data-value="5"]::before {content: "题目 5";}
        .ql-picker-label[data-value="6"]::before,
        .ql-picker-item[data-value="6"]::before {content: "题目 6";}
         .ql-picker-label[data-value="7"]::before,
        .ql-picker-item[data-value="7"]::before {content: "题目 7";}
      }
      .ql-picker.ql-font {.ql-picker-label[data-value="SimSun"]::before,
        .ql-picker-item[data-value="SimSun"]::before {
          content: "宋体";
          font-family: "SimSun" !important;
        }
        .ql-picker-label[data-value="SimHei"]::before,
        .ql-picker-item[data-value="SimHei"]::before {
          content: "黑体";
          font-family: "SimHei";
        }
        .ql-picker-label[data-value="Microsoft-YaHei"]::before,
        .ql-picker-item[data-value="Microsoft-YaHei"]::before {
          content: "微软雅黑";
          font-family: "Microsoft YaHei";
        }
        .ql-picker-label[data-value="KaiTi"]::before,
        .ql-picker-item[data-value="KaiTi"]::before {
          content: "楷体";
          font-family: "KaiTi" !important;
        }
        .ql-picker-label[data-value="FangSong"]::before,
        .ql-picker-item[data-value="FangSong"]::before {
          content: "仿宋";
          font-family: "FangSong";
        }
      }
    }
</style>