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() }) }, } }

你可能感兴趣的:(uni-app)