暂存

pages/miniClass/addClass.vue

@@ -76,8 +76,17 @@
 						班级简介:<span style="font-weight: normal; color: #999; font-size: 26rpx;">(600字以内)</span></text>
 					<view class="in">
 						<view class="uni-textarea">
-							<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600"
-								placeholder="请输入您的班级简介600字以内" />
+							<!-- <view class='wrapper'> -->
+								<view class="editor-wrapper">
+									<editor id="editor" class="ql-container" placeholder="请输入班级简介..."
+										show-img-size show-img-toolbar show-img-resize
+										@statuschange="onStatusChange" :read-only="readOnly"
+										@ready="onEditorReady">
+									</editor>
+								</view>
+							<!-- </view> -->
+							<!-- <textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600"
+								placeholder="请输入您的班级简介600字以内" /> -->
 						</view>
 					</view>
 				</uni-forms-item>
@@ -111,6 +120,8 @@
 					number: '', // 联系电话	
 					qrcode:'' // 群二维码
 				},
+				readOnly: false,
+				formats: {},
 				telError: false,
 				range:[
 					{ value: '0', text: "普通小班",name:"普通小班"},
@@ -203,6 +214,7 @@
 						this.refresh = false
 						if (res.code == 0) {							
 							this.form = res.result.class
+							this.onEditorReady()
 							if(this.form.icon != ''){
 								this.fileList1.push({url:this.form.icon})
 							}
@@ -223,6 +235,42 @@
 						})
 					});
 			},
+			readOnlyChange() {
+				this.readOnly = !this.readOnly
+			},
+			getHtml() {
+				return new Promise((resolve, reject) => {
+					this.editorCtx.getContents({
+						success: (res) => {
+							resolve(res);
+						},
+						fail: (error) => {
+							reject(err);
+						},
+					});
+				});
+			},
+			onEditorReady() {
+				// #ifdef APP-PLUS || MP-WEIXIN || H5
+				uni.createSelectorQuery().select('#editor').context((res) => {
+					this.editorCtx = res.context
+					if (this.form.content == '') return					
+					res.context.setContents({
+						html: this.form.content
+					})
+				}).exec()
+				// #endif
+			},
+			undo() {
+				this.editorCtx.undo()
+			},
+			redo() {
+				this.editorCtx.redo()
+			},			
+			onStatusChange(e) {
+				const formats = e.detail
+				this.formats = formats
+			},
 			getUserModel() {
 				console.log('获取用户的可添加模型列表');
 				$http.request({
@@ -319,8 +367,18 @@
 								deletePic2(event) {
 									this.fileList2.splice(event.index, 1)
 								},
-							onSubmit() {
-								this.$refs.form.validate().then(res => {
+							async onSubmit() {
+								this.$refs.form.validate().then(async res => {
+									let data = await this.getHtml();
+									var _data = data.html.replace(/<.*?>/g, "")
+									// if (!_data || _data == '') {
+									// 	uni.showToast({
+									// 		title: '请输入您的答案',
+									// 		icon: 'none'
+									// 	})
+									// 	return
+									// }
+									this.form.content = data.html
 									if (this.fileList1.length > 0) {
 										let _list = this.fileList1
 										_list = _list.map(item => item.url)