vue-quill-editor 默认的是以base64保存图片，会直接把图片base64和内容文本一同以字符串的形式提交到后端。 现在这样不科学
安装 vue-quill-editor
npm i vue-quill-editor --save
富文本示例代码
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/views/rich_text/rich_text.vue
图片直传七牛云
https://github.com/gek6/letou_hr/blob/master/letou_admin_web/src/api/upload.js
思路
- 用自定义的方法代替quill-editor中的图片点击事件
- 点击上传图片的icon后，去触发file类型 input 的点击事件，选择图片。（我这用的是饿了么的上传组件，上传到七牛云我已经写好了）
- 监听input的 onchange 拿到选择的文件数据，然后是要上传到自己服务器呢 还是上传到七牛云 就随意了。
- 上传完成以后 将图片的远程路径 添加到富文本内容区域
页面内引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
//注册组件
components: {
quillEditor
},
<div class="rich_box">
<!--富文本组件-->
<quill-editor v-model="content" ref="myQuillEditor" :options="options"></quill-editor>
</div>
<!--饿了么上传组件，也可以用input代替，都是隐藏起来-->
<el-upload
class="avatar-uploader"
action=""
:http-request="to_upload_img"
:show-file-list="false"
style="display: none"
>
<i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i>
</el-upload>
添加自定义方法
//mounted钩子中 替换插件图标点击事件
// 为图片ICON绑定事件 getModule 为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
// 点击图片ICON触发事件
imgHandler(state) {
console.log(state)
this.addRange = this.$refs.myQuillEditor.quill.getSelection()
if (state) {
// let fileInput = document.getElementById('imgInput')
// fileInput.click() // 加一个触发事件
// 选择并上传一张图片
let fileInput = document.getElementById('imgInput')
fileInput.click() // 加一个触发事件
}
},
to_upload_img(formdata){
return new Promise((resolve,reject)=>{
upload_img(formdata).then(res=>{
// 图片的远程路径
let value = res.key;
// 将图片添加到富文本内容区域
this.addRange = this.$refs.myQuillEditor.quill.getSelection();
// 调用编辑器的 insertEmbed 方法，插入URL
this.$refs.myQuillEditor.quill.insertEmbed(this.addRange !== null ? this.addRange.index : 0, 'image', value, Quill.sources.USER)
})
})
}
