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`按钮，点击该按钮时触发了上传
图片的逻辑。
文章介绍了如何将图片转化为Base64编码，并在weui.css文件中修改.weui-uploader__input-box样式，以替换上传按钮的图标。具体步骤包括调整图片尺寸、设置背景图像的位置和大小，以及应用no-repeat属性。
扫一扫
2566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
