Discussion :

[defacta]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[defacta]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
    }
}

[NoSmoking]

Bonjour,
vu que tu passes par des document.createTextNode, n'aurais tu pas meilleur compte de faire un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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