1、思路是拿到富文本,要判断是否有值。输入空这些都不能提交,都给一个校验
效果图:
a、html代码 这里的 Editor是我的富文本组件
<Editor
style="z-index: 10"
v-model="queryParams.content"
@change="editorChange"
:readonly="props.isDisabled"
/>
b、拿到富文本内容 这里我是直接在页面获取富文本的html
// 判断富文本编辑器输入是否为空或回车
const getText = (str) => {
return str
.replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
.replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
.replace(/ /gi, '') // 将所有 空格 replace ''
.replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
}
// 判断富文本是否为空
const isNull = (str) => {
if (str == '') return true
var regu = '^[ ]+$'
var re = new RegExp(regu)
return re.test(str)
}
// 富文本的改变事件 这里是vue3+ts的语法
const editorChange = (val) => {
// 举例 拿到html
let text = getText(val.getHtml())
editorValue.value = isNull(text) // true表示判空 false表示不为空
console.log(' editorValue.value===>', editorValue.value)
}