Element UI的
vue-
quill-
editor富文本编辑器支持
插入图片，但是默认的图片上传功能可能不能满足所有需求，需要进行
自定义。
首先，在
vue-
quill-
editor的配置中添加`imageHandler`方法，用于处理图片上传：
```javascript
<template>
<
quill-
editor v-model="content" :options="
editorOption"></
quill-
editor>
</template>
<script>
import {
quillEditor } from '
vue-
quill-
editor'
export default {
components: {
quillEditor
},
data () {
return {
content: '',
editorOption: {
imageHandler: this.imageHandler // 添加imageHandler方法
}
}
},
methods: {
imageHandler () {
// 处理图片上传
}
}
}
</script>
```
然后，可以使用第三方上传组件（如`el-upload`）进行图片上传，上传完成后将图片地址返回给`
quill-
editor`。可以在`imageHandler`方法中实现该逻辑：
```javascript
<template>
<div>
<el-upload
class="upload-demo"
:action="uploadUrl"
:on-success="handleSuccess"
:show-file-list="false"
:headers="headers"
ref="upload"
>
<el-button size="small" type="primary">上传图片</el-button>
</el-upload>
</div>
</template>
<script>
import {
quillEditor } from '
vue-
quill-
editor'
import { mapGetters } from '
vuex'
export default {
components: {
quillEditor
},
data () {
return {
content: '',
editorOption: {
imageHandler: this.imageHandler
},
uploadUrl: 'https://www.example.com/upload' // 图片上传地址
}
},
computed: {
...mapGetters(['getToken']) // 获取token
},
methods: {
imageHandler () {
const self = this
const uploadImg = this.$refs.upload
uploadImg.click()
uploadImg.$refs.input.onchange = function () {
const file = uploadImg.$refs.input.files[0]
const formData = new FormData()
formData.append('file', file)
self.$axios.post(self.uploadUrl, formData, {
headers: {
'Authorization': self.getToken // 设置token
}
}).then(res => {
const url = res.data.url // 获取图片地址
const
editor = self.$refs.
editor.
quill // 获取
quill对象
const index = (
editor.getSelection() || {}).index ||
editor.getLength()
editor.insertEmbed(index, 'image', url) //
插入图片
}).catch(err => {
console.log(err)
})
}
}
}
}
</script>
```
在这个例子中，使用了`el-upload`组件进行图片上传，上传完成后将图片地址返回给`
quill-
editor`。在`imageHandler`方法中，通过`this.$refs.
editor.
quill`获取到了`
quill`对象，然后调用`insertEmbed`方法
插入图片。
需要注意的是，由于`
quill`对象是异步创建的，所以需要在`mounted`生命周期中获取到`
quill`对象才能进行图片插入。可以使用`$nextTick`方法来确保获取到了`
quill`对象：
```javascript
<template>
<
quill-
editor v-model="content" :options="
editorOption" ref="
editor"></
quill-
editor>
</template>
<script>
import {
quillEditor } from '
vue-
quill-
editor'
export default {
components: {
quillEditor
},
data () {
return {
content: '',
editorOption: {
imageHandler: this.imageHandler
}
}
},
mounted () {
this.$nextTick(() => {
// 获取
quill对象
const
editor = this.$refs.
editor.
quill
// 在
quill对象中添加图片上传功能
editor.getModule('toolbar').addHandler('image', () => {
this.$refs.upload.click()
})
})
},
methods: {
imageHandler () {
// 处理图片上传
}
}
}
</script>
```
在这个例子中，通过`
editor.getModule('toolbar').addHandler`方法，在`
quill`对象中添加了一个`image`按钮，点击该按钮时触发了上传图片的逻辑。
最低0.47元/天 解锁文章
2625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
