H5_module/card/editDesc/editDesc.vue

<template>
	<view class="content">
		<editor
			@ready="onEditorReady"
			id="editor"
			placeholder="输入个人简介内容"
			placeholder-class="placeholder"
			class="textarea"
			@input="descInput"
			:read-only="isReadOnly"
		></editor>

		<view class="btn" @click="save()">保存</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
export default {
	data() {
		return {
			id: '',
			brief: '',
			isReadOnly: true
		};
	},

	onLoad(opt) {
		this.id = opt.id;
		let pages = getCurrentPages();
		let prevPage = pages[pages.length - 2];
		if(prevPage && prevPage.$vm.brief){
			this.brief = prevPage.$vm.brief;
		}
	},

	methods: {
		descInput(event) {
			this.brief = event.detail.html;
			// if (this.brief) {
			// 	this.descLength = event.detail.text.length - 1;
			// } else {
			// 	this.descLength = 0;
			// }
		},
		onEditorReady() {
			if (this.isEndit) {
				return;
			}
			const that = this;
			uni.createSelectorQuery()
				.select('#editor')
				.context(function(res) {
					that.editorCtx = res.context;
					that.editorCtx.setContents({
						html: that.brief //这里就是设置默认值的地方（html 后面给什么就显示什么）
					});
					that.isReadOnly = false;
				})
				.exec();
		},
		save() {
			var prama = {
				id: this.id,
				brief: this.brief
			};
		
			req.postRequest(
				api.card_saveOrUpdate,
				prama,
				json => {
					req.msg('保存成功');
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.cardInfo.brief = this.brief;
					uni.navigateBack({
						//uni.navigateTo跳转的返回，默认1为返回上一级
						delta: 1
					});
				},
				true
			);
		}
	// 	save() {
	// 		if(!this.brief) return req.msg('输入个人简介内容')
	// 		let pages = getCurrentPages(); //获取所有页面栈实例列表
	// 		let prevPage = pages[pages.length - 2]; //上一页页面实例
	// 		prevPage.$vm.brief = this.brief;
	// 		uni.navigateBack({
	// 			//uni.navigateTo跳转的返回，默认1为返回上一级
	// 			delta: 1
	// 		});
	// 	}
	}
};
</script>

<style>
@import './editDesc.css';
.ql-editor.ql-blank:before {
	/* 此处设置 placeholder 样式 */
	color: rgba(204, 204, 204, 1);
	font-style: normal;
	min-height: 400px;
}
</style>