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.