富文本编辑器

components/RichEditor/index.vue

@@ -31,19 +31,23 @@
 				</view>
  
 				<view class="editor-wrapper">
-					<editor id="editor" class="ql-container" placeholder="开始输入..."
-					show-img-size show-img-toolbar show-img-resize
-					@statuschange="onStatusChange" @ready="onEditorReady"
-					@input="onInputChange"
-					@blur="handleBlur">
-					</editor>
+					<editor
+						id="editor"
+						class="ql-container"
+						placeholder="开始输入..."
+						show-img-size show-img-toolbar show-img-resize
+						@statuschange="onStatusChange"
+						@ready="onEditorReady"
+						@input="onInputChange"
+						@blur="handleBlur"
+					></editor>
 				</view>
 			</view>
 		</view>
-		<view v-if="maxLength > 0" class="word-count">
+		<view v-if="max && max-0" class="word-count" :class="currentWordCount > max-0 ? 'warn' : 'normal'">
 			<text>{{ currentWordCount }}</text>
 			<text> / </text>
-			<text>{{ maxLength }}</text>
+			<text>{{ max }}</text>
 		</view>
 	</view>
 </template>
@@ -55,9 +59,10 @@
 	*/
 	export default {
 		props:{
-			maxLength: {
+			max: {
 				type: Number,
-				default: 0
+				default: 0,
+				validator: value => value >= 0
 			},
 			richValue: {
 				type: String,
@@ -91,15 +96,20 @@
           zitixiabiao: false,
           zitishangbiao: false,
           shanchu: true,
-          direction: false,
+          direction: false
         },
-				prevHtml: null,
+				inputTimer: null,
 				currentWordCount: 0,
 				readOnly: false,
 				formats: {}
 			}
 		},
 		methods: {
+			isExceedValidate(alert = false, title = '字数超出限制') {
+				const bool = Boolean(this.max-0 && (this.currentWordCount-0 > this.max-0)) 
+				if (alert && bool) uni.showToast({ title, icon: 'none', duration: 2000 })
+				return bool
+			},
 			handleBlur() {
 				this.editorCtx.getContents({
 					success: (res) => {
@@ -108,18 +118,16 @@
 				})
 			},
 			onInputChange(e) {
-				const text = e?.detail?.text || null
-				const html = e?.detail?.html || null
-				if (!text || !html) return
-
-				if (this.maxLength && (text.length >= this.maxLength)) {
-					uni.showToast({ icon: 'none', title: `最多可输入${this.maxLength}个字符` })
-					setEditorContent(this.prevHtml)
-					return
-				}
-
-				this.currentWordCount = text.length || 0
-				this.prevHtml = html
+				clearTimeout(this.inputTimer)
+				this.inputTimer = setTimeout(() => {
+					const text = e?.detail?.text ? e.detail.text : null
+					const html = e?.detail?.html ? e.detail.html : null
+					if (!text || !html) return
+					this.currentWordCount = text.length || 0
+					if (this.max-0 && (text.length >= this.max-0)) {
+						uni.showToast({ icon: 'none', title: `最多可输入${this.max}个字符` })
+					}
+				}, 500)
 			},
 			setEditorContent(content) {
 				this.editorCtx.setContents({
@@ -127,8 +135,11 @@
 				});
 			},
 			onEditorReady() {
+ 
+				// #ifdef APP-PLUS || MP-WEIXIN || H5
 				this.createSelectorQuery().select('#editor').context((res) => {
 					this.editorCtx = res.context
+					
 					this.setEditorContent(this.richValue)
 				}).exec()
 				// #endif	
@@ -181,7 +192,7 @@
 				})
 			},
 			insertImage() {
-                // 上传图片方法 这里需要调用上传图片接口，拿到图片url并插入
+				// 上传图片方法 这里需要调用上传图片接口，拿到图片url并插入
 				this.$utils.uploadImage(1, (res) => {
 					this.editorCtx.insertImage({
 						src: res,
@@ -246,10 +257,12 @@
   color: #06c;
 }
 
+.warn { color: #fe574a; }
+.normal { color: #999; }
+
 .word-count {
 	margin-top: 10px;
   font-size: 12px;
-  color: #999;
 	text-align: right;
 	margin: 4px;
 }

components/positionItem/components/baseInfo.vue

@@ -19,11 +19,10 @@
         </view>
 			</uni-forms-item>
       <uni-forms-item label="岗位职责" name="content" required>
-        <uni-easyinput type="textarea" v-model="formData.content" autoHeight  placeholder="请输入内容"></uni-easyinput>
-        <!-- <RichEditor @blur="richEditorBlur" :richValue="formData.content" /> -->
+        <RichEditor ref="contentRef" :richValue="formData.content" @blur="val => editorBlur('content', val)" :max="1500" />
 			</uni-forms-item>
       <uni-forms-item label="岗位要求 " name="requirement" required>
-        <uni-easyinput type="textarea" v-model="formData.requirement" autoHeight  placeholder="请输入内容"></uni-easyinput>
+        <RichEditor ref="requirementRef" :richValue="formData.requirement" @blur="val => editorBlur('requirement', val)" :max="1500" />
 			</uni-forms-item>
 		</uni-forms>
     <!-- 确认框 -->
@@ -31,7 +30,7 @@
       <uni-popup-dialog
         type="warn"
         cancelText="取消"
-        confirmText="确认" 
+        confirmText="确认"
         title="系统提示"
         content="您确定要放弃目前岗位描述的内容吗？"
         @confirm="handleConfirm"
@@ -46,7 +45,7 @@ import { dictObj } from '@/utils/position.js'
 import { getNextDate } from '@/utils/date'
 import { getRecruitPositionDetails } from '@/api/new/position'
 import { dateToTimestamp } from '@/utils/date.js'
-// import RichEditor from '@/components/RichEditor'
+import RichEditor from '@/components/RichEditor'
 const props = defineProps({
   data: {
     type: Object,
@@ -56,8 +55,7 @@ const props = defineProps({
 
 const formData = ref({
   positionId: props.data?.positionId || '',
-  // name: props.data?.name || '',
-  name: props.data?.name + new Date().getTime().toString() || '',
+  name: props.data?.name || '' + new Date().getTime().toString(), // + new Date().getTime().toString()
   expireTime: props.data?.expireTime || getNextDate(15, 'YYYY-MM-DD', 'day'),
   content: props.data?.content || '',
   requirement: props.data?.requirement || ''
@@ -92,6 +90,10 @@ const rules = {
 	},
 }
 
+const editorBlur = (key, val) => {
+  formData.value[key] = val || ''
+}
+
 const pushTemplate = () => {
   formData.value.content = jobTemplateRes.value.content
   formData.value.requirement = jobTemplateRes.value.requirement
@@ -124,7 +126,6 @@ const useJobTemplate = async () => {
     return
   }
   jobTemplateRes.value = res.data
-  console.log('res.data:', res.data)
   if (formData.value?.content || formData.value?.requirement) {
     // 弹窗提示
     confirm.value.open()
@@ -134,15 +135,16 @@ const useJobTemplate = async () => {
   }
 }
 
-// const richEditorBlur = (content) => {
-//   formData.value.content = content
-// }
-
 const form = ref()
+const contentRef = ref()
+const requirementRef = ref()
 const soFar = ref(props.data?.expireTime === null ? [1] : [])
 const getQuery = async () => {
   const valid = await unref(form).validate()
   if (!valid) return
+  if (contentRef.value?.isExceedValidate(true, '岗位职责字数超出限制')) return
+  if (requirementValid.value?.isExceedValidate(true, '岗位要求字数超出限制')) return
+
   const obj = {
     hirePrice: 0,
     soFar: Boolean(soFar.value?.length),
@@ -151,8 +153,6 @@ const getQuery = async () => {
   }
   obj.expireTime = obj.soFar ? null : dateToTimestamp(obj.expireTime)
   obj && Object.keys(obj).length && Object.keys(obj).forEach(key => { if (['areaId', 'eduType', 'expType'].includes(key) && obj[key] === -1)  obj[key] = null })
-
-  console.log('基本信息:', obj)
   return obj
 }