Element UI vue-quill-editor 富文本编辑器插入图片自定义
时间: 2023-11-24 12:39:22 浏览: 148
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`按钮,点击该按钮时触发了上传图片的逻辑。