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':
Ce code insère bien le contenu de AreaInsert dans myInstance1. Le problème c'est les retours à la ligne.
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; } }
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:
Mais cela insére dans la DIV éditable myInstance1 [object HTMLBRElement] à la place d'un retour à la ligne.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 var br = document.createElement('br'); text = text.replace(/\\n/g, br);
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.
Partager