uniapp-editor组件的使用:修改editor的内容

一、项目中要求:

1.1 点击 写文章
uniapp-editor组件的使用:修改editor的内容
1.2 点击 标签
uniapp-editor组件的使用:修改editor的内容
1.3 点击 #爱情#
uniapp-editor组件的使用:修改editor的内容
1.4 最后标签展示为蓝色字体
uniapp-editor组件的使用:修改editor的内容
二、思路:
这是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>
  1. 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>
  1. 在父组件onshow的时候调用子组件Content的setLabel方法、进而调用EditCont组件的setLabel方法;
onShow() {
	this.$refs.Content.setLabel();
},
// 设置话题
setLabel(){
	this.$refs.editCont.setLabel();
},
  1. 这是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>,这样就解决了换行的问题
上一篇:IDEA的使用和快捷键


下一篇:VueJs(16)---Nuxt引入mavon-editor插件实现markdown功能