1. The idea is to get the rich text and judge whether it is worthwhile. Enter empty, these cannot be submitted, and a verification is given
Renderings:
a. The Editor here in the html code is my rich text component
<Editor
style="z-index: 10"
v-model="queryParams.content"
@change="editorChange"
:readonly="props.isDisabled"
/>
b. Get the rich text content Here I get the rich text html directly on the page
// 判断富文本编辑器输入是否为空或回车
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)
}