The wangEditor plug-in judges whether the user has input content

Article Directory

• • Problem Description
  • Determine whether the user enters content
  • summary

Problem Description

Usually, rich text boxes are used in development, and wangEditor is a plug-in that I use most in development, mainly because it is easy to use, and the options on the program are easy to configure. The tools used by users are more selective. So when we use the wangEditor plug-in, how to judge whether the user has input content

Determine whether the user enters content

When the user does not enter, the default content of wangEditor is <p><br/></p>, and when the user only enters a space or a newline, the content must be empty

1. Using regular expressions, when the user does not enter, or only enters a space or a newline, reset the content to ""

   /**
    * 判断editor富文本域是否为空
    * str返回的值为"" 代表输入框里面有值 成功
    * str返回！="" 代表里面有空格 回车 失败
    * */
   const getWangEditorText = (str: any) => {
     return str
       .replace(/<[^<p>]+>/g, '')  // 将所有<p>标签 replace ''
       .replace(/<[</p>$]+>/g, '')  // 将所有</p>标签 replace ''
       .replace(/&nbsp;/gi, '')  // 将所有 空格 replace ''
       .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
   };

2. Determine whether the obtained content is ""

   const isWangEditorTextNull = (str: any) => {
     if (str == '') return true
     var regu = '^[ ]+$'
     var re = new RegExp(regu)
     return re.test(str)
   }

summary

let text = getWangEditorText(content)
console.log(isWangEditorTextNull(text))  // true表示判空  false表示不为空

The above are all the process methods to judge whether the content of the rich text box of wangEditor has been input by the user. The program is relatively simple, and I hope you can give me some pointers if there are mistakes! ! ! !