首先需要绑定两个事件compositionstart、compositionend两个事件分别是输入法唤起输入法关闭
setup: (ed) => { const vm = this ed.on(‘keyup‘, function (e) { vm.wordLimit(e) }); ed.on(‘input‘, function (e) { vm.wordLimit(e) }) ed.on(‘compositionstart‘, function (e) { vm.isChinese = false }); ed.on(‘compositionend‘, function (e) { vm.isChinese = true }) }
在keyup和keyinput事件里调用核心字数控制函数并且代入event,输入法输入时innerText有可能跳过1000所以要兼容下输入跳过问题
//字数限制 wordLimit (e) { const vm = this let last = ‘‘ let lastIndex = ‘‘ let startVal = ‘‘ let endVal = ‘‘ if (e.target.innerText.length === 1000) { vm.htmlText = e.target.innerHTML //兼容输入法有可能会跳过1000 } else if ((!vm.isChinese && e.target.innerText.length === 1001)) { last = e.target.innerText.substr(e.target.innerText.length - 1, 1) lastIndex = e.target.innerHTML.lastIndexOf(last) startVal = e.target.innerHTML.substring(0, lastIndex) endVal = e.target.innerHTML.substring(lastIndex + 1, e.target.innerHTML.length) vm.htmlText = startVal + endVal } if (e.target.innerText.length > 1000) { e.target.innerHTML = vm.htmlText var ifra = document.getElementById("tinymces_ifr"); this.keepLastIndex(ifra.contentWindow.document.getElementById(‘tinymce‘), ifra.contentWindow) if (!this.limitNum) { this.$message.error(‘长度限制为1000个字符‘) this.limitNum++ } } },
整体的核心思路判断富文本编辑器的innerText的字符数量,如果到达了指定文字那么我们就记录下当前的innerHTML,当超过了指定数量我们就把之前记录的innerHTML赋值给e.target.innerHTML,防止用户继续输入,要注意的是发往后端的是innerHTML是带有HTML标签的所以后端不要进行字符拦截,纯前端拦截。
本人前端小白一昧,有更好的方案希望大佬指点。
原文:https://www.cnblogs.com/webgyx/p/14392262.html