vue2里面WangEditor怎么配置图片上传地址
时间: 2024-02-15 10:05:01 浏览: 72
vue+wangEditor的使用与展示(表格+图片自定义上传+带格式粘贴)
5星 · 资源好评率100%
WangEditor是一款基于JavaScript和CSS的富文本编辑器,它可以在Vue2中很好地使用。如果您想要配置WangEditor的图片上传地址,您可以按照以下步骤进行:
1. 首先,在Vue项目中安装wangeditor插件,可以使用npm包管理器安装,命令如下:
```
npm install wangeditor --save
```
2. 然后在需要使用WangEditor的Vue组件中引入和注册WangEditor:
```javascript
<template>
<div ref="editorElem" style="height: 500px;"></div>
</template>
<script>
import wangEditor from 'wangeditor'
export default {
mounted() {
const editor = new wangEditor(this.$refs.editorElem)
editor.create()
}
}
</script>
```
3. 接着,在WangEditor的配置中加入图片上传配置项,示例代码如下:
```javascript
<template>
<div ref="editorElem" style="height: 500px;"></div>
</template>
<script>
import wangEditor from 'wangeditor'
export default {
mounted() {
const editor = new wangEditor(this.$refs.editorElem)
editor.config.uploadImgServer = '/upload' // 图片上传地址
editor.create()
}
}
</script>
```
其中,`uploadImgServer`是WangEditor的图片上传地址配置项,您需要将其设置为您的实际图片上传地址。例如,您可以将其设置为`/upload`,然后在后端服务器中编写图片上传接口,将图片上传到服务器中。
注意,图片上传接口需要支持CORS跨域请求,否则WangEditor将无法上传图片到服务器中。
阅读全文