一个编辑器粘贴限制字数的方法保留样式和word格式

没啥思路，就取编辑器内容html，dompase解析，然后递归循环截取

  traverse(curNode, curLen,limit,truncated,types)
{

    if (truncated) {
        return curLen;
    }
    let that=this;
    //如果其为文本节点则进行截取内容
    if (curNode.nodeType === Node.TEXT_NODE) {
        //内容为空
        const content = curNode.textContent.trim().replace(/\n|\r|\s/mg, '');

           //         6+5=11
           //当子元素的时候 最后一位 就不应该加了

        const len = curLen + content.length;

        //大于以后则中断此操作
        if (len >= limit) {
            //因为是小段落 所以这块分2种情况 一种直接大文本
            //一种是小段路截取 更具当前的计算长度 来判断当前还需要剩余截取多少
          let subs=0;
         
          
          subs=limit - curLen
          const truncatedContent = content.substr(0, subs) ;
          curNode.textContent = truncatedContent;
          truncated = true;
          return limit;
        } else {
          //这里面返回2种情况 第一种没有子节点 则返回当前内容 有子节点则返回+

          if (content.length>0) {

            return len;
          }else {
            return curLen;
          }

        }
      } else {
        //如果不是文本节点 展示其子节点
        const childNodes = [...curNode.childNodes];
        //0
        let len = curLen;
        let i=2
        for (let childNode of childNodes) {
          if (childNode=="" || childNode==null) {
            continue
          }

          len= that.traverse(childNode, len,limit,truncated,i);

            if (truncated) {
              break;
            }
        }

        return len;
      }
},
truncateHtml(html, limit) {
    let that=this;
    //https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
    const parser = new DOMParser();
    const serializer = new XMLSerializer();
    //解析dom结构
    const doc = parser.parseFromString(html, "text/html");
    //递归其节点
    // 【释义】4

    // <p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">“行路难”为乐府古题，多咏叹世路艰难及贫困孤苦的处境。</span></p>
    // <p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">“行路难”为乐府古题，多咏叹世路艰难及贫困孤苦的处境。</span></p>
    //<p style="text-align: left;"> “行路难”为乐府古题，<span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-family: Arial;"> </span><strong>【释义】</strong></p>
    // 【释义】4
    let lens=0
    let truncated = false;
    let i=0;
    let tmp=[]
    for (let childNode of doc.body.childNodes) {
        //p 6
        if (lens>=limit) {
          childNode.textContent="";
          tmp.push(i);
          //doc.body.removeChild(doc.body.childNodes[i]);
          ++i;
          continue;
        }
        lens=that.traverse(childNode,lens,limit,truncated,1);
        ++i;
    }
    //每删一个节点就变化
    //19 20 21 22 23
    //22 21 20 19 18
    //直接倒序删除
    tmp.reverse();
    for(let index in tmp) {
      // console.log(index)
      // if(index==0) {
      //   doc.body.removeChild(doc.body.childNodes[tmp[index]]);
      //   console.log(doc.body.childNodes)
      // }else {

      //   // if (doc.body.childNodes[tmp[index]-1]) {
      //   //   doc.body.removeChild(doc.body.childNodes[tmp[index]-1]);
      //   // }

      // }
          if (doc.body.childNodes[tmp[index]]) {
          doc.body.removeChild(doc.body.childNodes[tmp[index]]);
        }
    }
    const truncatedHtml = serializer.serializeToString(doc.documentElement);
    return truncatedHtml;
  },



粘贴效果wangeditor

onCustomPaste(editor, event) {
      let that = this
        const html = event.clipboardData.getData('text/html');
        //editor.dangerouslyInsertHtml(this.subHtml(html,200))

        editor.dangerouslyInsertHtml(html);

        var as=editor.getHtml()
        editor.clear()

        editor.dangerouslyInsertHtml(this.truncateHtml(as,that.maxLength))
        // 阻止默认的粘贴行为
        event.preventDefault()
        return false

  }