renshou/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];
		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() {
			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>