一、项目中要求：

1.1 点击 写文章

1.2 点击 标签

1.3 点击 #爱情#

1.4 最后标签展示为蓝色字体

二、思路：
这是uniapp里editor组件的使用。
需先获取EditCont组件中的内容，进而将 #爱情# 标签添加到组建的内容中，最后重新渲染EditCont组件内容；

三、方法：

1. 项目中有一个主页面，主页面内有一个子组件Content；写了ref属性（快速获取dom节点）

<template>
	<!-- 写文章 -->
	<view class="writeArticle">
		<Content :act='act' :isWatch="isWatch" :label='label' :val='val' :contFoucs='contFoucs' @swichContFoucs='swichContFoucs' @switchVal='switchVal' :editAddImgIndex='editAddImgIndex' @addImg='addImg' @upArtlistImgs="upArtlistImgs" ref="Content" />
	</view>
</template>

2. Content中包括EditCont组件；写了ref属性（快速获取dom节点）

<template>
	<view class="content">
		<EditCont ref='editCont' :isWatch="isWatch" :editorVal="val.writeCont" :label="label" placeholder="请输入内容" @lqlFocus='lqlFocus' @lqlBlur='lqlBlur' @closeInsertImg='closeInsertImg' @upArtlistImgs="upArtlistImgs"/>
	</view>
</template>

3. 在父组件onshow的时候调用子组件Content的setLabel方法、进而调用EditCont组件的setLabel方法；

onShow() {
	this.$refs.Content.setLabel();
},

// 设置话题
setLabel(){
	this.$refs.editCont.setLabel();
},

4. 这是EditCont组件内的setLabel方法；

// 设置标签
	setLabel(){
		let _this = this;
		// 获取数组中最后一个标签;
		let label = _this.label[_this.label.length-1];
		// 优化重复的标签
		if(this.labelList.indexOf(label) == -1){
			// console.log('添加');
			this.labelList.push(label);
		}else{
			// console.log('不添加');
			return;
		}
		// 选择editor实例
		_this.editorCtx.getContents({
			success(data) {
				// 获取编辑器中的文本
				let _html = data.html;
				// 去掉文本中默认的标签
				_html = _html.replace('<p><br></p>','');
				// 接去掉文本中最后面的</p>标签
				_html = _html.substring(0,_html.length-4);
				// 重新拼接文本,并在末尾添加</p>标签
				let html = `${_html}<span style="color: #3a8afb;"> #${label}#</span><i style="font-style: normal;"> </i></p>`;
				// 给富文本设置内容
				_this.editorCtx.setContents({html});
			}
		})
	},```

四、出现的问题：
1. 父组件在第一次onshow时无法调用子组件的方法（暂时还未出问题）
2. 在给EditCont组件重新渲染值得时候，会出现重复的标签，比如：#爱情#  #爱情# ；（此问题已解决）
3. 在渲染标签时，会遇到每渲染一个标签就出现换行的行为，因为uniapp的editor组件默认是<p><br></p>标签，所以在获取editor组件的内容时应先去掉后尾的</p>，然后添加内容时再重新添加上</p>，这样就解决了换行的问题