vue-quill-editor element上传图片
时间: 2023-08-26 18:04:55 浏览: 185
要在vue-quill-editor中上传图片,可以使用element-ui的el-upload组件,并将其嵌入到vue-quill-editor中。以下是一个简单的示例:
首先,在组件的data中定义一个变量,用于保存上传后的图片url:
```js
data() {
return {
imageUrl: ''
}
}
```
然后,在vue-quill-editor中添加一个toolbar选项,用于触发上传图片的操作。在这个选项中,我们可以使用一个自定义的按钮,将el-upload组件嵌入到其中:
```js
<template>
<div>
<vue-quill-editor v-model="content" :options="editorOption">
<div slot="toolbar">
<span class="ql-formats">
<button class="ql-image" @click="uploadImage">Upload Image</button>
</span>
</div>
</vue-quill-editor>
<el-dialog :visible.sync="dialogVisible">
<el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:on-success="handleSuccess"
:show-file-list="false">
<el-button slot="trigger" size="small" type="primary">Click to Upload</el-button>
</el-upload>
</el-dialog>
</div>
</template>
```
在这个示例中,我们使用了一个el-dialog组件来显示el-upload组件。在点击上传图片按钮时,会打开这个对话框。当上传成功后,会调用handleSuccess方法来获取上传后的图片url,并将其保存到imageUrl变量中。
最后,我们需要在组件的methods中实现uploadImage和handleSuccess方法:
```js
methods: {
// 打开上传图片的对话框
uploadImage() {
this.dialogVisible = true
},
// 上传成功后将图片url保存到imageUrl变量中
handleSuccess(response, file, fileList) {
this.imageUrl = URL.createObjectURL(file.raw)
this.dialogVisible = false
// 将上传的图片插入到编辑器中
const range = this.quill.getSelection()
this.quill.insertEmbed(range.index, 'image', this.imageUrl)
}
}
```
在这个示例中,我们使用了URL.createObjectURL方法来获取上传后的图片url。然后,我们将这个url插入到quill编辑器中,以便在编辑器中显示上传后的图片。
阅读全文
相关推荐
















