mercredi 27 septembre 2017

Copying and Pasting Text into a ContentEditable without formatting - JavaScript

I am making a code that allows me to copy the text from other places and paste in a content 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, and 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, but 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 this bugs?

Sorry for my poor english, I'm going to the University and I don't have much time to correct my syntax errors.




Aucun commentaire:

Enregistrer un commentaire