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