【react】braft-editor 富文本字数限制失效。复制粘贴可以。但是纯打字就失效。

需求：富文本必填且字数限制140字

复制粘贴braft-editor富文本插件的属性可以限制字数。可是一旦纯打字限制字数就失效了。

解决方法：在rules中写一个正则效验函数。

---

函数根据getDataLenght的值判断富文本的长度是否超过了140个字符。如果超过，则返回true，否则返回false

 //maxlengs函数的参数是富文本的value

const maxlengs = (data: any) => {
    if (!data) {
      return;
    }
    const isHtml = /<\/?.+?\/?>/g;

    const isImg = /<img.*?(?:>|\/>)/gi;

    const isVideo = /<video.*?(?:>|\/>)/gi;

    const getData = String(data); // data为富文本转换的html

    const getDataLenght = getData
      ? getData.replace(isImg, '1').replace(isVideo, '1').replace(isHtml, '').length
      : 0;
    if (getDataLenght > 140) {
      return true;
    } else {
      return false;
    }
  };

最后放在rules里面效验

   <Form.Item
          label="弹层公告描述"
          name="description"
          rules={[
            {
              required: true,
              validator: (rule, value) => {
                console.log(value.toHTML());
                if (value.isEmpty()) {
                  return Promise.reject('公告描述不能为空');
                } else {
                  if (maxlengs(value.toHTML())) {
                    return Promise.reject('最多只能输入140个文字');
                  } else {
                    return Promise.resolve();
                  }
                }
              },
            },
          ]}
        >
          {/* 富文本编辑 */}
          <BraftEditor
            style={{ border: '1px solid #DCDFE6' }}
            media={{
              allowPasteImage: false, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
              image: false, // 关闭图片插入功能
              video: false, // 关闭视频插入功能
              audio: false, // 关闭音频插入功能
            }}
            Maxlength={140}
            placeholder="请输入内容"
            excludeControls={['emoji']}
            onChange={handleEditorChange}
            defaultValue={type === 1 ? '' : BraftEditor.createEditorState(data?.description)}
          />
        </Form.Item>

注意：我们手动封装的字数其实还有标签。首先我们要把标签过滤掉，然后再判断他的长度。

所以我们在函数中用正则过滤掉了 。。

这样就完美解决该问题。。。

还有个细节是。。自带的属性在140字之后就输入不了了。然后也不会提示。。而我们写的这个会提示但是不会输入不了。。。至于具体需求还是得根据产品设计的来做。。。