//不能上传大图片的原因:quill-editor在上传图片时,会将图片转化为base64字符串,若图片过大,生成的base64字符串就会超长
//组件封装:
<template>
<div>
<!-- 文件上传input 并将它隐藏-->
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:headers="{Authorization: token}"
:on-success="uploadSuccess"
/>
<quill-editor ref="QuillEditor" v-model="value" :content="content" :options="editorOption" @change="onEditorChange($event)" />
</div>
</template>
<script>
//导入获取token的函数
import { getToken } from '@/utils/auth'
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗,斜体,下划线,删除线
['blockquote', 'code-block'], // 引用,代码块
[{ 'header': 1 }, { 'header': 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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
[{ 'align': [] }], // 居中
['clean'], // 清除样式,
['link', 'image', 'video'] // 上传图片、上传视频
]
export default {
props: {
value: {
default: '',
type: String
}
},
data() {
return {
content: '',
token: getToken(),
editorOption: {
placeholder: '请在这里输入',
theme: 'snow', // 主题 snow/bubble
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
toolbar: {
container: toolbarOptions,
handlers: {
image: function(value) {
if (value) {
console.log(document.querySelector('.avatar-uploader'))
// 调用element的图片上传组件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false)
}
}
}
}
}
}
}
},
computed: {
//获取后端的上传接口地址
uploadUrl() {
return `${process.env.VUE_APP_BASE_API}/file/upload/`
}
},
methods: {
// 图片上传成功
uploadSuccess(res) {
// 获取富文本组件实例
const quill = this.$refs.QuillEditor.quill
// 如果上传成功
if (res) {
// 获取光标所在位置
const length = quill.getSelection().index
// 插入图片,res为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', res.data.path)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息,需引入Message
this.$message.error('图片插入失败!')
}
},
// 监听编辑器内容
onEditorChange({ quill, html, text }) {
this.content = html
this.$emit('input', html)
}
}
}
</script>
<style lang="scss" scoped>
.avatar-uploader {
display: none;
}
</style>
//页面中使用:
//content为富文本编辑器输入的内容
<quill-editor v-model="content"></quill-editor>