最近项目中有用到react-quill富文本,有一个需求是限制2000,但是react-quill本身并没有字数限制,所以我找到了一些解决方案
1. 使用deleteText
quill.on('text-change', function(delta, old, source) {
if (quill.getLength() > limit) {
quill.deleteText(limit, quill.getLength());
}
});
在富文本的onChange事件里通过getLength()获取富文本字数,然后通过deleteText删除多出来的文字。
不过这种方法不是很好,会造成页面的卡顿
2. 监听键盘按下的事件onKeyDown
<ReactQuill
onKeyDown={this.checkCharacterCount}
onChange={(value) => this.props.onChange(value)}
/>
checkCharacterCount = (event) => {
if (this.getCharacterText().length > this.props.maxCharacters && event.key !== 'Backspace') {
event.preventDefault();
}
}
监听键盘按下的事件,在监听事件中判断富文本字数是否超出限制的字数,如果超出且键盘按下的不是删除键,就禁止它的默认事件