151 lines
4.7 KiB
Markdown
151 lines
4.7 KiB
Markdown
|
## avue 富文本编辑器
|
|||
|
|
<p align="center">
|
|||
|
|
<img width="600" src="https://gitee.com/smallweigit/avue-plugin-ueditor/raw/master/packages/demo/demo.png">
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
## Avue官网
|
|||
|
|
[https://avuejs.com](https://avuejs.com)
|
|||
|
|
|
|||
|
|
## 介绍
|
|||
|
|
- [demo](https://avuejs.com/doc/plugins/ueditor-plugins)
|
|||
|
|
- [npm](https://www.npmjs.com/package/avue-plugin-ueditor)
|
|||
|
|
- [git](https://gitee.com/smallweigit/avue-plugin-ueditor)
|
|||
|
|
|
|||
|
|
## 三方编辑器wangEditor
|
|||
|
|
|
|||
|
|
- [文档](https://www.wangeditor.com/v5/getting-started.html)
|
|||
|
|
- 组件配置中customConfig属性为wangEditor编辑器的配置
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
```
|
|||
|
|
1.安装
|
|||
|
|
vue2:npm install avue-plugin-ueditor --save
|
|||
|
|
vue3:npm install avue-plugin-ueditor@next --save
|
|||
|
|
|
|||
|
|
2.导入
|
|||
|
|
import AvueUeditor from 'avue-plugin-ueditor'
|
|||
|
|
Vue.use(AvueUeditor);
|
|||
|
|
|
|||
|
|
3.Avue配置中使用
|
|||
|
|
...
|
|||
|
|
column:[
|
|||
|
|
...
|
|||
|
|
{
|
|||
|
|
label:'test',
|
|||
|
|
prop:'test',
|
|||
|
|
component: "avueUeditor",
|
|||
|
|
//wangEditor编辑的配置
|
|||
|
|
customConfig: {
|
|||
|
|
MENU_CONF: {
|
|||
|
|
lineHeight: {
|
|||
|
|
lineHeightList: ['1', '1.5', '2', '2.5']
|
|||
|
|
},
|
|||
|
|
emotion: {
|
|||
|
|
emotions: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉'.split(' ') // 数组
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
//是否启用oss(qiniu/ali)
|
|||
|
|
oss:'',
|
|||
|
|
headers:{},
|
|||
|
|
data:{},
|
|||
|
|
propsHttp: {
|
|||
|
|
home:'',
|
|||
|
|
url:'',
|
|||
|
|
res: ''
|
|||
|
|
},
|
|||
|
|
//普通图片上传
|
|||
|
|
action: "",
|
|||
|
|
//七牛云oss配置
|
|||
|
|
qiniu: {
|
|||
|
|
AK: "",
|
|||
|
|
SK: "",
|
|||
|
|
scope: "",
|
|||
|
|
url: "",
|
|||
|
|
deadline: 1
|
|||
|
|
},
|
|||
|
|
//阿里云oss配置
|
|||
|
|
ali: {
|
|||
|
|
region: "",
|
|||
|
|
endpoint: "",
|
|||
|
|
accessKeyId: "",
|
|||
|
|
accessKeySecret: "",
|
|||
|
|
bucket: ""
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
...
|
|||
|
|
]
|
|||
|
|
4.组件中使用
|
|||
|
|
<avue-ueditor v-model="text" v-bind="options"></avue-ueditor>
|
|||
|
|
|
|||
|
|
options: {
|
|||
|
|
//wangEditor编辑的配置
|
|||
|
|
customConfig: {
|
|||
|
|
lineHeights: ['1', '1.15', '1.6', '2', '2.5', '3']
|
|||
|
|
},
|
|||
|
|
propsHttp: {
|
|||
|
|
home:'',
|
|||
|
|
url:'',
|
|||
|
|
res: ''
|
|||
|
|
},
|
|||
|
|
//是否启用oss(qiniu/ali)
|
|||
|
|
oss:'',
|
|||
|
|
headers:{},
|
|||
|
|
data:{},
|
|||
|
|
//普通图片上传
|
|||
|
|
action: "",
|
|||
|
|
//七牛云oss配置
|
|||
|
|
qiniu: {
|
|||
|
|
AK: "",
|
|||
|
|
SK: "",
|
|||
|
|
scope: "",
|
|||
|
|
url: "",
|
|||
|
|
deadline: 1
|
|||
|
|
},
|
|||
|
|
//阿里云oss配置
|
|||
|
|
ali: {
|
|||
|
|
region: "",
|
|||
|
|
endpoint: "",
|
|||
|
|
accessKeyId: "",
|
|||
|
|
accessKeySecret: "",
|
|||
|
|
bucket: ""
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## upload Attributes
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
| ------- | --------------------------------- | ------ | --------- | ------ |
|
|||
|
|
| action | 图片上传地址 | String | — | - |
|
|||
|
|
| headers | 上传附带请求头数据 | Object | — | - |
|
|||
|
|
| data | 上传附带数据 | Object | — | - |
|
|||
|
|
| props | 相关可配置参数，具体参考props配置 | Object | — | - |
|
|||
|
|
| oss | 是否使用oss不写则为普通上传 | String | ali/qiniu | - |
|
|||
|
|
| qiniu | 七牛云oss配置，具体参考qiniu配置 | Object | — | - |
|
|||
|
|
| ali | 阿里云oss配置，具体参考ali配置 | Object | — | - |
|
|||
|
|
|
|||
|
|
## propsHttp Attributes
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
| ---- | ---------------------- | ------ | ------ | ------ |
|
|||
|
|
| res | 返回的数据结构层次 | String | — | - |
|
|||
|
|
| url | 返回结构体图片地址字段 | String | — | - |
|
|||
|
|
| home | 图片的根路径地址 | String | — | - |
|
|||
|
|
|
|||
|
|
## qiniu Attributes
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
| -------- | ------------------ | ------ | ------ | ------ |
|
|||
|
|
| AK | 七牛云的密钥 | String | — | - |
|
|||
|
|
| SK | 七牛云的密钥 | String | — | - |
|
|||
|
|
| scope | 七牛云存储的空间名 | String | — | - |
|
|||
|
|
| url | 空间的自定义域名 | String | — | - |
|
|||
|
|
| deadline | token的过期时间 | String | — | - |
|
|||
|
|
|
|||
|
|
## ali Attributes
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|||
|
|
| --------------- | ---------------------------------------- | ------ | ------ | ------ |
|
|||
|
|
| region | oss所在区域的名称，具体查看阿里云oss文档 | String | — | - |
|
|||
|
|
| endpoint | oss所在区域的域名，具体查看阿里云oss文档 | String | — | - |
|
|||
|
|
| accessKeyId | 阿里云的密钥 | String | — | - |
|
|||
|
|
| accessKeySecret | 阿里云的密钥 | String | — | - |
|
|||
|
|
| bucket | 阿里云存储的空间名 | String | — | - |
|