uniapp之封装一个随用随取的简单editor组件（多端适用）

“我正在参加「掘金·启航计划”

提前声明，本文参考了以下两篇文章

参考一：https://blog.csdn.net/weixin_49133874/article/details/121394513

参考二：https://www.likecs.com/show-205141293.html?sc=2246

参考一里有字体图标文件需要付费下载，本打工人赚钱不易，只能自己动手写了，参考二字体文件倒是有但是没有封装成组件，样式在我看来对于封装组件有严重问题，最重要一点editor在小程序和别的端初始化不一样没有考虑到

第一步：在uniapp内置组件editor基础上封装

封装的代码已经放在码云上了gitee.com/octopus-hit… 自己用的时候需要先创建一个或已经有了的uniapp项目，像这样

注意事项：查阅uniapp官方文档虽然说支持H5、App的vue页面、微信小程序、百度小程序，但是实际初始化用uni.createSelectorQuery().select('#editor')会在小程序报错，查阅微信开放文档得知初始要使用这个apithis.createSelectorQuery().select('#editor');除此之外编辑器项目toolbar和编辑器不用像参考二那样使用特殊的绝对占位或者相对占位，我试了，在页面里用文档流会乱。所以我用了最普通的css样式。

第二步:如何使用组件

这里在父组件使用editor时绑定了值editorDetail和方法getContents，一旦编辑器有了变化就能监听到然后触发getContents方法把最新的值赋给content，拿到值你就可以根据自己的业务看是否需要传给后端。 父组件触发getContents如图：

第三步：效果图

总结

editor组件其实uniapp内置组件有，但是看过文档的就会发现，文档那里只有editor编辑器，toolbar是没有的，我通过查阅资料，参考别的博主的方法，融合在一起就封装了一个简单的editor组件

相关代码粘一下

//封装组件的代码很多我就放在码云上了，这里我只粘使用部分的代码
<template>
	<view>
		
		<editor1 :editorDetail=infos.content  @getContents="getContents" ></editor1>
		
		
	</view>
</template>

//引入
<script>
import editor1 from '@/components/editor/index.vue'
	export default {
		components: {
			editor1
		},
		data() {
			return {
			infos:{
				content:'', 
				}
			}
		},
		methods: {
			getContents(html){
				this.infos.content = html
				// console.log('this.infos.content=>',this.infos.content)
			},
			
	}
}
</script>