braft-editor富文本编辑器,如何限制输入的字数?

需求先说一下:使用braft-editor富文本编辑器,限制用户可输入的字符为100个,当大于100个字符时不能往下继续输入
悲惨经历诉一波:
疑问一:onReachMaxLength={handleMaxLength}事件不生效,打印过这个事件是已经传递进来的
image.png

疑问二:后来用onChange写到父组件上,事件可以正常生效也可以取到当前输入的字符数量,输入的文本内容。但是输入的文本内容里面是含有标签的。那么我该如何实现控制住他输入的字符不能大于100个,大于时不能再往下输入了呢?
image.png

疑问三:续上面问题,我想到用readOnly的属性。但是当我输入的值大于100的时候,富文本里面的字符被清空了……这不是我想要的效果……我该用什么方法才能解决呢?
image.png

image.png
求各位路过的大神解答一下……### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本(请勿用截图)

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 9.4k
2 个回答
新手上路,请多包涵

https://github.com/margox/bra...
使用作者推荐的功能拓展插件braft-extensions

import MaxLength from 'braft-extensions/dist/max-length'
const LIMIT = 100;
const options = {
defaultValue: LIMIT // 指定默认限制数,如不指定则为Infinity(无限)
}

BraftEditor.use(MaxLength(options))

然后<BraftEditor maxLength={LIMIT} />就能够使用maxLength去限制里面的字符数量。
作者提到的onReachMaxLength事件,我是用来显示超出提示的。

再贴出github中交代的注意事项:
粘贴内容时如果超过了限制字数,则整个粘贴内容都不会被粘贴到编辑器
对于富文本编辑器,限制输入字符数并不是一个很适合的做法
可通过editorState.toText().length获取到内容长度再进行友好提示

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题