推荐使用 elmentui 中的 upload 的组件配合此富文本编辑器使用。
原理是点击富文本编辑器上的图片上传按钮,触发 el 的上传组件
HTML部分
<!-- 商品内容 -->
<!-- 使用el上传组件配合编辑器 -->
<el-upload class="avatar-uploader" :action='uploadUrl' name="img" :show-file-list="false" :on-success="uploadSuccess">
</el-upload>
<!-- 编辑器 -->
<quill-editor class='editor' ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" />
需要 action 属性指定请求路径,show-file-list 让此组件隐藏
理论上这样做可以了,但是默认上传给服务器存储的却是 base64 格式的图片地址,这样图片太大的话会存入数据库失败,且我们需要后端的上传接口返回一个图片的 url 作为存储较为合适。
---------------------------------------------------------
编辑器这里给一个 ref 引用,为了获取编辑器中的按钮 dom 元素
使用此方法必须配置编辑器中的工具栏项目
<script>
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'] // 上传图片、上传视频
]
export default {
.....
}
....
</script>
upload 组件绑定了一个 uploadSuccess 函数,用来处理图片上传成功后的逻辑。那么
uploadSuccess(res) {
// 获取富文本组件实例
const quill = this.$refs.myQuillEditor.quill
// 如果上传成功
if (res) {
// 获取光标所在位置
const length = quill.getSelection().index
// 插入图片,res为服务器返回的图片链接地址
const newUrl = process.env.VUE_APP_BASEURL + res.url
quill.insertEmbed(length, 'image', newUrl)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息,需引入Message
this.$message.error('图片插入失败!')
}
}
res.url 是后端返回的图片的 url 地址,这样存储给编辑器中,然后发布文章的时候,就会将此 url 存储在数据库中。