记一次vue使用wangeditor富文本编辑器的小坑

330 阅读1分钟

项目中使用wangeditor编辑器用于提交货物的详情,第一次点击提交的时候没问题,显示空白,当我选中编辑框的时候这时候编辑器会加一个空白标签如下

'<p><br/></p>'

由于我只做了是否为空的处理于是乎就把这段空白标签上传过去了,以至于前端以v-html形式显示为空白;这时候需要加一个判断,去除指定标签之后再判断是否存在:

  // 判断富文本是否为空
    getText(str) {
      if (!str) return '';
      return str
        .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
        .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
        .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
        .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
    },

在上传编辑器内容的时候进行判断,如果还存在,那就原封不动上传,反之手动赋值为'';

  // 危险性
      if (!this.getText(params.risk)) {
        params.risk = '';
      }