uniapp 自定义富文本编辑器，加粗，大标题，文章书写

<template>
	<view>
		<editor class="myedit" placeholder="写点啥呢~~" @ready="onEditReady" @statuschange="onStatuschange"></editor>
		<view class="item" @click="clickDivider">
			<text class="iconfont icon-fengefu" ></text>
		</view>
		<view class="item" @click="clickHead">
			<text class="iconfont icon-biaoti" :class="headShow ? 'active' : ''"></text>
		</view>
		<view class="item" @click="clickBold">
			<text class="iconfont icon-jiacu" :class="boldShow ? 'active' : ''"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headShow:false,
				boldShow:false
			};
		},
		methods: {
			//初始化
			onEditReady() {
				uni.createSelectorQuery().in(this).select('.myedit').fields({
					size:true,
					context:true
				},res=>{
					console.log(res);
					this.editorCtx=res.context//获取上下文
				}).exec()
			},
			//判断样式状态改变颜色的方法
			checkStatus(name,detail,obj){
				if(detail.hasOwnProperty(name)){
					this[obj] = true;
				}else{
					this[obj] = false;
				}
			},
			//当样式改变时改变图标的颜色
			onStatuschange(e){
				let detail=e.detail
				console.log(detail);
				this.checkStatus("header",detail,"headShow")
				this.checkStatus("bold",detail,"boldShow")
			},
			//添加分割线
			clickDivider(){
				this.editorCtx.insertDivider();
				console.log("添加分割线");
			},
			//添加大标题
			clickHead(){
				this.headShow=!this.headShow
				this.editorCtx.format("header","h1")
			},
			//加粗
			clickBold(){
				this.boldShow=!this.boldShow
				this.editorCtx.format("bold")
			},
		}
	}
</script>

<style lang="scss">
	.iconfont{
		font-size: 36rpx;
		color:#333;
		&.active{
			color:#0199FE
		}
	}
</style>