detection-business/components/Rboy-editor

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. 引入

import RboyEditor from "@/components/Rboy-editor/Rboy-editor.vue"

2. 注册组件

components: {
	RboyEditor,
},

3. 应用

<Rboy-editor ref="RboyEditor" @uploadFile="uploadFile" :count="6"></Rboy-editor>
<button @click="get_content">获取内容</button>
<button @click="set_content">设置内容</button>

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: "图像",
			})
		}
	},
}