Editor,将失焦事件进行抽离，用作检查，错误提示信息移植到组件内部，并且将blur事件导出，用于表格的submit事件对表格进行检验

<template>
  <div :class="['vue-easymode-editor', !editorStatus.isValid ? 'is-invalid' : '']">
    <textarea ref="textArea"></textarea>
  </div>
  <span v-if="!editorStatus.isValid" class="invalid-feedback mt-1">{{editorStatus.message}}</span>
</template>
<script lang="ts" setup>
import EasyMDE, { Options } from 'easymde'
import { defineProps, defineEmits, ref, onMounted, onUnmounted, defineExpose, reactive } from 'vue'
// 类型属性以及事件
interface EditorProps {
  modelValue?:string;
  Options?:Options;
}
interface EditorEvents {
  (type: 'update:modelValue', value: string):void
  (type: 'change', value:string):void
  (type: 'blur'):void
}
const props = defineProps<EditorProps>()
const emit = defineEmits<EditorEvents>()
// 有了模板后需要初始化的一些数据
// 1.暴露对应的方法
// 2.结合页面实现验证功能
const textArea = ref<null | HTMLTextAreaElement>(null)
let easyMDEInstance: EasyMDE | null = null
const innerValue = ref(props.modelValue || '')
const editorStatus = reactive({
  isValid: true,
  message: ''
})
onMounted(() => {
  if (textArea.value) {
    // 组装options
    const config: Options = {
      ...(props.Options || {}),
      element: textArea.value,
      initialValue: innerValue.value
    }
    easyMDEInstance = new EasyMDE(config)
    // 监控对应的事件
    easyMDEInstance.codemirror.on('change', () => {
      if (easyMDEInstance) {
        const updateValue = easyMDEInstance.value()
        innerValue.value = updateValue
        // 将对应的事件发射出去，让父组件进行捕获
        emit('update:modelValue', updateValue)
        emit('change', updateValue)
      }
    })
    easyMDEInstance.codemirror.on('blur', () => {
      if (easyMDEInstance) {
        // 暴露失焦事件，用户写自己的业务
        emit('blur')
        // 组件内部功能，失焦检验输入是否合法
        blur()
      }
    })
  }
})
onUnmounted(() => {
  if (easyMDEInstance) {
    easyMDEInstance.cleanup()
  }
  easyMDEInstance = null
})
// 清空编辑器
const clear = () => {
  if (easyMDEInstance) {
    // value方法不传参数，取值，传入就是赋值，类似jq的value方法
    easyMDEInstance.value('')
  }
}
// 编辑器的失焦事件
const blur = () => {
  if (easyMDEInstance) {
    const currentValue = easyMDEInstance.value()
    if (currentValue.trim() === '') {
      editorStatus.isValid = false
      editorStatus.message = '文章详情不能为空'
    } else {
      editorStatus.isValid = true
      editorStatus.message = ''
    }
    return editorStatus.isValid
  }
}
// 返回组件的实例
const getMDEInstance = () => {
  return easyMDEInstance
}
defineExpose({
  clear,
  getMDEInstance,
  // editorStatus,
  blur
})
</script>
<style lang="scss">
.vue-easymode-editor.is-invalid {
  border:1px solid #dc3545;
}
</style>

createPost.vue组件，当提交表单的时候进行如下改造：

接受一个blur函数，返回布尔值
interface editorInstance {
  clear: () => void;
  getMDEInstance: () => EasyMDE | null,
  blur: () => boolean
}
    const onFormSubmit = (result: boolean) => {
    // 如果用户使用了easymode组件，验证输入是否合法
      let flag = true
      if (editorRef.value) {
        flag = editorRef.value.blur()
      }
      if (result && flag) {
        const { column, _id } = store.state.user
        if (column) {
          const newPost:PostProps = {
            title: titleVal.value,
            content: contentVal.value,
            column,
            author: _id
          }
          if (imageId) {
            newPost.image = imageId
          }
          store.dispatch('fetchNewPost', newPost).then(() => {
            console.log('新建文章接口是否成功')
            messageNode = createMessage('新文章创建成功！2秒后跳往详情页面', 'success')
            setTimeout(() => {
              messageNode.destory()
              router.push({ name: 'column', params: { id: column } })
            }, 2000)
          })
        }
      }
    }