首页 > 其他 > 详细

vue 使用tinymce进行字数限制

时间:2021-02-09 12:09:53      阅读:399      评论:0      收藏:0      [点我收藏+]

首先需要绑定两个事件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标签的所以后端不要进行字符拦截,纯前端拦截。

本人前端小白一昧,有更好的方案希望大佬指点。

 

vue 使用tinymce进行字数限制

原文:https://www.cnblogs.com/webgyx/p/14392262.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!