vue-quill-editor中使用element上传图片
时间: 2023-08-26 09:06:59 浏览: 109
在vue-quill-editor中使用element上传图片,可以通过以下步骤实现:
1. 安装element-ui和vue-quill-editor
```bash
npm install element-ui vue-quill-editor --save
```
2. 在组件中引入element-ui和vue-quill-editor
```js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: {
VueQuillEditor,
},
data() {
return {
editorOption: {
// ...
},
};
},
mounted() {
Vue.use(ElementUI);
},
// ...
};
```
3. 在组件模板中添加上传图片的按钮
```html
<vue-quill-editor v-model="content" :options="editorOption"></vue-quill-editor>
<el-upload
class="upload-image"
action="your_upload_url"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="your_headers"
>
<el-button size="small" type="primary">上传图片</el-button>
</el-upload>
```
4. 实现上传图片的方法handleUploadSuccess
```js
methods: {
handleUploadSuccess(res) {
if (res.code === 200) {
const url = res.data.url; // 上传成功后返回的图片路径
const quill = this.$refs.myQuillEditor.quill;
const range = quill.getSelection();
// 插入图片到编辑器中
quill.insertEmbed(range.index, 'image', url);
} else {
this.$message.error('上传失败');
}
},
},
```
5. 样式调整
```css
.upload-image {
margin-top: 10px;
display: inline-block;
}
```
阅读全文