CODEWITHSUNDEEP
javascriptcontenteditableline-breaks
defacto
defacto

Reputation: 359

Editable DIV Add some text at cursor

I have added a button to insert some text from a textarea to an editable DIV using this function found on stakoverflow.

function insertAtCursor(){
    document.getElementById('myInstance1').focus() ; // DIV with cursor is 'myInstance1' (Editable DIV)
    var sel, range, html;
    var text = document.getElementById('AreaInsert').value ; // Textarea containing the text to add to the myInstance1 DIV
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

With Internet Explorer using document.selection.createRange().text it works fine for line breaks. With Firefox and Chrome, line breaks of the textarea are not respected, all the text inserted to the editable div from the textarea is on only one line.

How to modify insertAtCursor() to make it works for line breaks with Firefox and Chrome ?

Upvotes: 2

Views: 3291

Answers (2)

Tim Down
Tim Down

Reputation: 324507

I suggest splitting the text up into separate text nodes, replacing the line breaks with <br> elements, creating a DocumentFragment containing the text and <br> nodes and calling insertNode() to insert it.

Demo: http://jsfiddle.net/timdown/zfggy/

Code:

function insertAtCursor(){
    document.getElementById('myInstance1').focus() ; // DIV with cursor is 'myInstance1' (Editable DIV)
    var sel, range;
    var text = document.getElementById('AreaInsert').value ; // Textarea containing the text to add to the myInstance1 DIV
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            var lines = text.replace("\r\n", "\n").split("\n");
            var frag = document.createDocumentFragment();
            for (var i = 0, len = lines.length; i < len; ++i) {
                if (i > 0) {
                    frag.appendChild( document.createElement("br") );
                }
                frag.appendChild( document.createTextNode(lines[i]) );
            }

            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

Upvotes: 5

Matthias Holdorf
Matthias Holdorf

Reputation: 1050

I think I found a more appropriate solution for your problem. For demonstration see this Fiddle. See also the css property word-wrap.

Java Script:

var button = document.getElementById('insertText');

button.onclick = function() {
    var text = document.getElementById('textarea').value;
    document.getElementById('insertHere').innerText = document.getElementById('insertHere').textContent = text 
};


To achieve cross browser compatibility, you could also do this:

   var isIE = (window.navigator.userAgent.indexOf("MSIE") > 0);

   if (! isIE) {
      HTMLElement.prototype.__defineGetter__("innerText", 
              function () { return(this.textContent); });
      HTMLElement.prototype.__defineSetter__("innerText", 
              function (txt) { this.textContent = txt; });
   }

Upvotes: 0

Related Questions