<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>