Remove formatting from a contentEditable div

前端 未结 8 802
醉话见心
醉话见心 2020-12-25 11:40

I have a contentEditable Div and I want remove any formatting especially for copy and paste text.

8条回答
  •  情歌与酒
    2020-12-25 12:02

    I'd like to add my solution to this issue:

    ContentEditableElement.addEventListener('input', function(ev) {
      if(ev.target.innerHTML != ev.target.textContent) {
    
        // determine position of the text caret
        var caretPos = 0,
          sel, range;
        sel = window.getSelection();
        if (sel.rangeCount) {
          range = sel.getRangeAt(0);
          var children = ev.target.childNodes;
          var keepLooping = true;
          for(let i = 0; keepLooping; i++) {
            if(children[i] == range.commonAncestorContainer || children[i] == range.commonAncestorContainer.parentNode) {
              caretPos += range.endOffset;
              keepLooping = false;
            } else {
              caretPos += children[i].textContent.length;
            }
          }
    
          // set the element's innerHTML to its textContent
          ev.target.innerHTML = ev.target.textContent;
    
          // put the caret where it was before
          range = document.createRange();
          range.setStart(ev.target.childNodes[0], caretPos);
          range.collapse(true);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    });
    

    (this isn't compatible with older versions of IE)

提交回复
热议问题