Vue rich text editor must fill judgment

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(/&nbsp;/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)
}

Guess you like

Origin blog.csdn.net/m0_56276571/article/details/129876194