document.createTextNode / Copier du texte dans une DIV éditable et retour à la ligne.

Version imprimable

Bonjour,

J'utilise ce code pour insérer dans une DIV éditable du texte au niveau du curseur et se trouvant dans le textarea 'AreaInsert':
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function insertAtCursor(){ get('myInstance1').focus() ; // DIV avec le curseur 'myInstance1' (Editable DIV) var sel, range, html; var text = get('AreaInsert').value ; // Textarea avec le texte à insérer dans la DIV myInstance1 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) { // Pour Internet Explorer document.selection.createRange().text = text; } }
Ce code insère bien le contenu de AreaInsert dans myInstance1. Le problème c'est les retours à la ligne.
Dans le cas d'Internet Explorer qui utilise ce code document.selection.createRange().text = text; les retours à la ligne sont bien respectés.

Pour les autres navigateurs utilisant range.insertNode cela ne respecte pas les retours à la ligne et tout ce qui est inséré dans la div se tient sur la même ligne.

J'ai essayé de régler le problème comme ceci:
Code:

1 2 var br = document.createElement('br'); text = text.replace(/\\n/g, br);
Mais cela insére dans la DIV éditable myInstance1 [object HTMLBRElement] à la place d'un retour à la ligne.

Comment Copier le contenu du textarea dans la div en respectant les retours à la ligne ?

Je pensais couper le contenu du textarea dans un tableau pour séparer chaque ligne mais je ne vois pas comment faire. Et faire autant de range.insertNode qu'il y a d’éléments dans le tableau en les séparant avec document.createElement('br');

Merci.

Voilà le code (Pas fait par moi :roll:) mais reprenant l'idée du split du textarea:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
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;
    }
}

08/07/2013, 18h31
NoSmoking
Bonjour,
vu que tu passes par des document.createTextNode, n'aurais tu pas meilleur compte de faire un
Code:

1 2 var result = lines.join('<br>'); frag.innerHTML = result;