Copying and Pasting Text into a ContentEditable without formatting - JavaScript

Viewed 1009

I am making a code that allows me to copy the text from other places and paste it into a contenteditable but keeping the blanks and breaking lines.

Here is my code:

// When I paste a text from another place
this.querySelector('*[contenteditable="true"]').addEventListener('paste', function(e){
    // Variables 
    var clipboardData, pastedData;
    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();
    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    // Change \n to <br>
    // I use this because then I will make another things with the <br> tags
    pastedData = pastedData.replace(/(?:\r\n|\r|\n)/g, '<br />');
    /*
        Here's a function that will get the character offset of the caret within the specified element. However, this is a naive implementation that will almost certainly have inconsistencies with line breaks. It makes no attempt to deal with text hidden via CSS (I suspect IE will correctly ignore such text while other browsers will not). To handle all this stuff properly would be tricky. I've now attempted it for my Rangy library. 
    */
    var caretOffset = 0;
    var doc = this.ownerDocument || this.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(this);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(this);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    // Set the text at the carret position
    this.innerHTML = [this.innerHTML.slice(0, caretOffset), pastedData, this.innerHTML.slice(caretOffset)].join('');                
        // Set the carret to the correct position
        var range = document.createRange();
            sel = window.getSelection();
        // Try to set the range
        try{
            range.setStart(this.firstChild, caretOffset + pastedData.length);
    } catch(err){}
    // Range options
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
});   

When I use it, it works fine but sometimes crash, these are its bugs:

1) When I paste a text from a .txt file and and I put the caret at the end of the copied text and I try to copy another time the same text. This second text is copied on the middle not on the end where the caret is.

2) When I have some text in the contenteditable and I select it with the cursor to replace it with another text, this second text doesn't replace the selected part. It's pasted at the end of the text keeping now both texts.

3) If I'm writing a text and press enter to make a break line and in this point I paste a text, this will copy in the before line.

Any suggestion to solve some of these bugs?

0 Answers
Related