71 lines
1.6 KiB
Markdown
71 lines
1.6 KiB
Markdown
|
||
|
||
## RboyEditor 便捷式富文本
|
||
|
||
> **组件名：Rboy-editor**
|
||
> 代码块： `Rboy-editor`
|
||
|
||
|
||
## 属性
|
||
- count 类型Number 控制选择图片的数量 （默认 6）
|
||
- @uploadFile 选择图片的回调
|
||
- this.$refs.RboyEditor.editor_setContents(detail) 设置富文本内容方法 detail为内容
|
||
- let detail = await this.$refs.RboyEditor.editor_getcontents() 获取富文本内容方法 detail为获取到的内容（建议使用 async await）
|
||
|
||
|
||
|
||
|
||
## 使用方法
|
||
1. 引入
|
||
```js
|
||
import RboyEditor from "@/components/Rboy-editor/Rboy-editor.vue"
|
||
```
|
||
|
||
2. 注册组件
|
||
```js
|
||
components: {
|
||
RboyEditor,
|
||
},
|
||
```
|
||
|
||
3. 应用
|
||
```html
|
||
<Rboy-editor ref="RboyEditor" @uploadFile="uploadFile" :count="6"></Rboy-editor>
|
||
<button @click="get_content">获取内容</button>
|
||
<button @click="set_content">设置内容</button>
|
||
```
|
||
```js
|
||
data() {
|
||
return {
|
||
detail: "<p>Rboy 设置的内容</p>"
|
||
};
|
||
},
|
||
methods: {
|
||
// 设置内容
|
||
async set_content() {
|
||
this.$refs.RboyEditor.editor_setContents(this.detail)
|
||
},
|
||
// 获取内容
|
||
async get_content() {
|
||
let detail = await this.$refs.RboyEditor.editor_getcontents()
|
||
console.log(detail)
|
||
},
|
||
// 上传图片
|
||
async uploadFile(event) {
|
||
// event 选择的图片
|
||
for (var item in event.tempFilePaths) {
|
||
// uploadFileApi 为上传到服务端的接口 count大于1 使用 await
|
||
let src = await uploadFileApi(event.tempFilePaths[item])
|
||
// src.url 是服务端返回的图片地址
|
||
// this.$refs.RboyEditor(Object) 方法是往富文本设置图片内容 src 图片地址
|
||
this.$refs.RboyEditor.editor_insertImage({
|
||
src: src.url,
|
||
alt: "图像",
|
||
})
|
||
}
|
||
},
|
||
}
|
||
```
|
||
|
||
|