wangEdit编辑器

onBlur方法配合elementPlus，完成表单校验

富文本为空的校验：

// rules.ts
import { FormRules } from 'element-plus'

const getText = (str: string) => {
  return str
    .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
    .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
    .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
    .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
}

// 自定义校验规则
const validateIsEmpty = (rule: any, value: any, callback: any) => {
  if (getText(value).trim() === '') {
    callback(new Error('请输入'))
  } else {
    callback()
  }
}

export const Rules: FormRules = {
    summary: [
        { required: true, message: '请输入', trigger: 'blur' },
        { validator: validateTopicSummary, trigger: 'blur' }
    ]
}

<template>
    <el-form ref="formRef" :rules="rules">
        <el-form-item :prop="summary">
            <WangEditor  
              :content="formData.summary"
              @update:content="updateSummaryContent"
              @blur="contentChangeFn(`summary`)" 
            />
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import WangEditor form '@/components/Editor/WangEditor.vue'
import {Rules as rules} form './rules'

const formData = reactive({
    summary: '';
})

const formRef = ref<FormInstance>()

const updateSummaryContent = (val: any) => {
    formData.summary = val
}

const contentChangeFn = (formItem: string) => {
  if (!formRef.value) return
  formRef.value.validateField(formItem)
}

</script>

wangEdit组件完整代码如下：

<template>
  <div style="border: 1px solid #dcdfe6; width: 100%">
    <Toolbar
      style="border-bottom: 1px solid #dcdfe6; width: 100%"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="min-height: 150px; width: 100%"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="onChange"
      @onBlur="onBlur"
    />
  </div>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:content', 'blur'])
const mode = ref('default')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref(props.content)

// 模拟 ajax 异步获取内容
onMounted(() => {
  // 这里延时了200毫秒才成功，直接赋值失败
  setTimeout(() => {
    valueHtml.value = props.content
  }, 200)
})

// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  excludeKeys: [
    'fullScreen',
    'code',
    'group-video',
    'codeBlock',
    'insertImage',
    'insertLink',
    'emotion',
    'insertTable',
    'uploadImage',
    'insertVideo',
    'todo',
    'divider',
    'viewImageLink',
    'group-image'
  ]
}
const editorConfig: Partial<IEditorConfig> = {
  placeholder: '请输入...',
  scroll: false
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const onChange = (e: any) => {
  emits('update:content', e.getHtml())
}
const onBlur = (e: any) => {
  emits('blur')
}
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  // console.log(editor.getAllMenuKeys())
}

// 监听内容变化
watch(
  () => props.content,
  (newVal) => {
    valueHtml.value = newVal
  }
)
</script>

注意：

toolbarConfig：配置工具栏，可以根据自己的需求配置

wangEdit富文本编辑器（无图片功能）+ElementPlus表单校验

wangEdit编辑器