vue3 富文本编辑器组件非空验证残留

### 解决Vue3富文本编辑器组件非空验证问题 在处理Vue3中的富文本编辑器（如`vue-quill-editor`或`vue3-tinymce`）时，遇到非空验证问题是常见的挑战之一。当尝试提交表单并执行验证逻辑时，可能会发现即使输入框为空，验证也未能正常触发。 对于`vue-quill-editor`而言，在Element UI框架下使用时确实存在由`el-form-item`引起的样式冲突情况[^1]。这不仅影响视觉呈现还可能干扰到内部事件监听机制从而导致验证失败。为了修复这一现象： #### 使用 `v-model` 绑定数据模型 通过双向绑定的方式管理编辑器的内容状态可以更方便地控制其值的变化过程，并且更容易配合其他UI库一起工作。下面是一个基于TypeScript的例子展示如何设置初始内容并通过方法更新它： ```typescript <script lang="ts" setup> import { ref, watchEffect } from 'vue'; const richContent = ref<string>(''); watchEffect(() => { console.log(`Current content is ${richContent.value}`); }); </script> <template> <quill-editor v-model:value="richContent"></quill-editor> </template> ``` #### 自定义校验规则 针对特定场景下的需求定制化自己的检验函数来判断当前是否有有效字符被录入是非常必要的。这里给出一段简单的实现思路用于检测HTML字符串是否真正含有有意义的信息而不是仅仅包含空白符或其他无关标签： ```javascript function isEmpty(content:string):boolean{ let tempDiv=document.createElement("div"); tempDiv.innerHTML=content; return !tempDiv.innerText.trim().length; } ``` 此功能可以直接嵌入到Form Item的rules属性里作为自定义验证条件的一部分: ```html <el-form :model="ruleForm" status-icon :rules="rules"> ... <el-form-item label="文章正文：" prop="articleBody"> <quill-editor v-model:value="ruleForm.articleBody"/> </el-form-item> </el-form> ... // JavaScript部分 rules: { articleBody:[ { validator:(rule,value,callback)=>{ if(isEmpty(value)){ callback(new Error('请输入有效的文章内容')); }else{ callback(); } }, trigger:'blur'} ] }, ``` 上述代码片段展示了如何创建一个名为isEmpty()的方法来进行深层次的内容检查，并将其应用于ElFormItem组件内的prop字段上以确保只有满足要求的情况下才能继续操作流程。 而对于TinyMCE来说，则可以通过配置init参数里的setup回调函数添加类似的逻辑[^2]: ```javascript setup(editor){ editor.on('change keyup',()=>{ formRef.validateField('richText',(valid,message)=>{ // handle validation result here }); }) }, ``` 这样每当用户修改了编辑区域内的文字就会自动触发表单项重新评估有效性。