uni-app editor富文本编辑器

<template>
	<view class="courseIntroduce">
				<view class="navBar">
					<view class="title">课程介绍view>
					<view class="edit" v-if="isEdit" @tap="toEdit">编辑view>
				view>
				<view class="editBox"  v-if="showEdit">
					<editor 
					id="editor" 
					class="ql-container" 
					placeholder="请开始编辑" 
					:read-only="!isEditing" 
					@input="getEditText">editor>
					<view 
					class="addBtn" 
					@tap="toEdit" 
					v-if="!showEdit">立即编辑view>
				<view 
				class="addBtn" 
				@tap="saveEditText" 
				v-if="showEdit && !isEdit">保存view>
 view>
 template>

import common from '../../common/common.js';
export default {
	data() {
		return {
			// 展示编辑按钮
			showEdit: false,
			// 展示编辑文字
			isEdit: false,
			// 课程介绍
			introduceText: '',
			// 是否可编辑
			isEditing: false,
			introFlag:'' //判断介绍是否为空
 		 }
	},
	onShow() {
		this.updatePageInfo()
	},
	methods: {
	// 编辑
		toEdit() {
			this.showEdit = true;
			this.isEdit = false;
			this.isEditing = true;
		},
		// 获取编辑的文本
		getEditText(e) {
			// console.log(e.detail.text);
			this.introFlag = e.detail.text;
			this.introduceText = e.detail.html;
		},
		saveEditText() {
		//  这样判断好像有点问题，勉强先用这个
			// console.log(this.introduceText == '

')
			if (this.introFlag == '\n') {
				this.introduceText =''
			}
			let data = {introduce:this.introduceText}
			this.updataCourseInfo(data)
		},
			// 更新新课程信息 
		updataCourseInfo(data) {
			let {course_id,course_name}= this.courseObj
			let reqData ={course_id,cname:course_name,...data}
			common.request('/Service.Course/edit',reqData,'POST',true).then(
				(res) => {
					console.log(res)
					this.updatePageInfo()
				}
			)
		},
			// 更新页面
		updatePageInfo(){
			let {gm_id} = uni.getStorageSync('userInfo')
			let data = { pai_id: this.pai_id,gm_id };
			let p = new Promise((resolve, reject) => {
			   common.request('/Service.Pai/view', data, 'GET', true).then(res => {
			   	this.courseObj = res.data;
				this.user_list = res.data.user_list
			   	this.coachLabelArr =  this.courseObj.coach_label.split(",")
			   	this.introduceText = res.data.introduce
				if(this.courseObj.course_imgarr){
				this.imgList = this.courseObj.course_imgarr.split("|")
				}
				if(this.courseObj.course_imgarr=="") {
					this.imgList=[]
				}
				if (this.imgList.length>0) {
					this.showImage = true
					this.allImgTNum = this.imgList.length
				}
				if(this.imgList.length==0) {
					this.showImage = false
					this.allImgTNum = 0
				}
			   	if(this.introduceText!='') {
			   		this.isEdit = true
			   		this.showEdit = true
			   	}
				if(this.introduceText=='') {
					this.showEdit = false;
					this.isEdit = false;
				}
				this.isEditing = false
				resolve(res.data.introduce);
			   });
			})
			
			p.then((data)=> {
				//console.log(data,113)
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					this.editorCtx.setContents({
						html:data
					})
					this.editorCtx.format('textIndent', '2em') // 首行缩进两字符
				}).exec()
			})
			
		},
	}
}