wangEditor插件判断用户是否有输入内容

文章目录

• • 问题描述
  • 判断用户是否输入内容
  • 小结

问题描述

平常在开中都会用到富文本框，而wangEditor是我在开发中用到最多的一个插件，主要是它使用方便，程序上选项配置容易配置。用户使用到的工具类具有更多选择性。那么当我们在使用wangEditor插件的时候怎么判断用户是否有输入内容

判断用户是否输入内容

当用户在没有输入的情况下，wangEditor默认的内容为<p><br/></p>，还有就是用户只输入空格或者换行时，都是内容必须为空

1. 使用正则表达式，当用户没输入，或者只输入空格或者换行时，将内容重置为“”

   /**
    * 判断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. 判断获取的内容是否为“”

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

小结

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

以上就是判断 wangEditor富文本框的内容，用户是否有输入的所有流程方法。程序上比较简陋，有错误的地方还望指点一二！！！！