vue-quill-editor 默认插入图片是间接将图片转为 base64 再放入内容中，如果图片比拟大的话，富文本的内容就会很大，即便图片不大，只有图片较为多，篇幅较长，富文本的内容也是异样的大的.
提供一个简略思路: 抉择完图片, 将图片上传至服务器, 服务器返回相应的 url, 前端将图片 url 插入到光标地位即可, 而后将上传组件暗藏
<template>
<el-upload
class="avatar-uploader"
:action="imageServerIp"
:on-success="handleAvatarSuccess"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
style="display:none"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<quill-editor
ref="myQuillEditor"
v-model="data.content"
class="quill-content editer"
:options="editorOption"
@ready="onEditorReady($event)"
>
</quill-editor>
</template><script>
import {quillEditor} from ‘vue-quill-editor’
import ‘quill/dist/quill.snow.css’
export default {
name: ‘Home’,
components: {
quillEditor},
data () {
return {
content: '',
// 零碎上传接口
imageServerIp: '',
imageUrl: '',
editorOption: {
theme: 'snow',
modules: {
toolbar: {
container: [['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
['blockquote', 'code-block'], // 援用，代码块
[{header: 1}, {header: 2}], // 题目，键值对的模式；1、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] }], // 几级题目
[{color: [] }, {background: [] }], // 字体色彩，字体背景色彩
[{font: [] }], // 字体
[{align: [] }], // 对齐形式
['clean'], // 革除字体款式
['image', 'video']
],
// 上传图片、上传视频
handlers: {image: function (value) {if (value) {
// 用 upload 的点击事件代替文本编辑器的图片上传事件
document.getElementsByClassName('el-upload__input')[0].click()} else {this.quill.format('image', false)
}
}
}
}
}
}
}},
computed: {
editor () {return this.$refs.myQuillEditor.quill}},
methods: {
handleAvatarSuccess (file, res) {// this.imageUrl = URL.createObjectURL(file.raw);
const that = this
//editor 对象
const quill = this.$refs.myQuillEditor.quill
// 如果上传胜利
if (res.response.code === '0') {
// 获取光标所在位置
const length = quill.selection.savedRange.index
// 插入图片 res.info 为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.response.datas)
// 调整光标到最初
quill.setSelection(length + 1)
} else {that.$Message.error('图片插入失败')
}
that.quillUpdateImg = false
},
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {this.$message.error('上传头像图片只能是 JPG/PNG 格局!')
}
if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
onEditorReady () {}}
}
</script> 具体代码请看: [https://github.com/Lebronjamesgood/vue-editor-bigImage](https://github.com/Lebronjamesgood/vue-editor-bigImage)