Discussion :

[Clément.7]

Bonjour à tous ! J'ai un gros problème

Nouveau problème : le curseur "ne veux pas" se positionner au début d'une ligne.

Si, avec le clavier, je positionne le curseur sur le début d'une ligne (avant le premier caractère de la ligne), il retourne au début du texte, ou à la fin de la ligne précédente si celle-ci comporte du texte.

Si je vais au début d'une ligne (par exemple quant il y a 5 lignes vides puis du texte), parfois le curseur se positionne au début de la première ligne contenant du texte, parfois il revient au début.


Quelqu'un sait-il pourquoi et a-t-il une solution ?

Merci d'avance !


Merci d'avance à ceux qui pourraient faire avancer la résolution de mon problème !

[vandenn3]

Informations pour les futurs lecteurs:

Nouveau problème : le curseur "ne veux pas" se positionner au début d'une ligne.

Si, avec le clavier, je positionne le curseur sur le début d'une ligne (avant le premier caractère de la ligne), il retourne au début du texte, ou à la fin de la ligne précédente si celle-ci comporte du texte.

Si je vais au début d'une ligne (par exemple quant il y a 5 lignes vides puis du texte), parfois le curseur se positionne au début de la première ligne contenant du texte, parfois il revient au début.


Quelqu'un sait-il pourquoi et a-t-il une solution ?

Merci d'avance !

lien de l'essai: http://jsfiddle.net/fax1vznu/1/

Salut,
Je ne comprend pas de problème, le code que tu a donné semble fonctionner
que dois-je faire (écrire quoi, mettre mon curseur où, sélectionner quoi)
pour qu'un bug survienne ?

[Clément.7]

Il suffit d'aller sur cette page : http://jsfiddle.net/fax1vznu/1/

De saisir du texte et d'appuyer sur la touche ENTRÉE : Le curseur va revenir à la première ligne

Et désolé si je n'ai pas été assez clair...
J'utilise un div possédant l'attribut contenteditable (<div contenteditable="true">) et à chaque fois que l'utilisateur appuie sur une touche, une fonction est exécutée : elle remplace le texte par du HTML en lui faisant subir quelques modifications (ici, ça colore "lol" en bleu).
Or, le curseur bug : Lorsque l'on place le curseur avec les touches fléchées sur le début d'une ligne (vide), le curseur se déplace à une autre position (parfois la ligne au-dessus, parfois le premier caractère du div, parfois la fin de la ligne précédente, etc.)
Et je n'arrive pas à corriger ce comportement.

Quelqu'un saurait-il m'aider ?

[vandenn3]

Heu, moi rien de spécial ne se passe. j'écris "bonjour", j'appuye sur enter, et mon curseur va naturellement à la ligne.

C'est quoi la variable rangy? elle n'est définie nul part dans le code, si?

[Clément.7]

Bizarre... Moi quand je tape "bonjour" et que j'appuie sur la touche entrée mon curseur va à la ligne puis en moins d'une demi-seconde se déplace au tout début du div...
Quel navigateur et quelle version de ton navigateur utilises-tu ? (ex: Chrome 27)

EDIT : Ah oui c'est normal firefox fait une erreur pour ça car il ne connaît pas la propriété "innerText". J'ai donc corrigé mon code : http://jsfiddle.net/fax1vznu/3/

EDIT 2 : Et sur mon smartphone sous Chrome c'est encore plus bizarre quand je tape "lol" ça me rajoute des caractères c'est bizarre

En tout cas merci pour vos réponses très rapides j'ai pas souvent l'occasion de voir un sujet avec des réponses aussi rapides sur les autres forums.

[vandenn3]

J'utilise firefox 34.

Dans ton code, à un moment tu supprime les balises html du contenu: (tu le fait même à 2 endrois je crois)
el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,"");
or, les retours à la lignes dans un div (même s'il est contenteditable) sont des <br>
donc les brs sont supprimés, le div à une longueur trop petite pour la fonction rangy, elle (ou ton code je n'ai pas tout regardé) défini donc la position à 0.

[Clément.7]

Ah oui cette commande fait partie de la fonction "formatText" que je n'utilises plus dans mon code, j'avais oublié de l'enlever désolé (j'ai dû mettre à jour ce code plusieurs fois déjà et ça m'a échappé)
Donc j'enlève cette fonction : http://jsfiddle.net/fax1vznu/4/.

EDIT : Ah oui en effet c'est bizarre... -> corrigé http://jsfiddle.net/fax1vznu/5/ mais le curseur bug toujours. Au moins vous pourrez voir quel est le bug (le bug lui-même buggait avant que je ne corrige le code )

[vandenn3]

visiblement la fonction saveSelection ne prend pas en compte les <br>...

[Clément.7]

Si car si on tape "function() {
salut
}" dans le champ et qu'on place le curseur avec la souris sur "salut" puis qu'on écrit (ex: "function() {
salut !
}" le curseur reste bien sur la 2ème ligne, donc le <br> sont pris en compte...

Je ne comprends vraiment pas d'où peut bien venir le problème...

[vandenn3]

Si j'écris "salut", puis 3 fois enter, puis "salut" (en copiant collant le texte dedans vu que les enter marchent pas trop), que je met mon curseur à la fin du 2ème "salut", dans la fonction window.color, la valeur start de la sélection vaut 10 (2fois la longueur de "salut").
Ce qui veut dire que tu peux mettre tant de <br> que tu veux, ils ne serons pas considérés comme des caractères.

[danielhagnoul]

Une division éditable n'est pas un "textarea", je ne pense pas que l'on puisse manipuler son contenu de la même manière.

De plus, son contenu est parfois surprenant, j'ai testé uniquement sous Chrome 39 avec les codes suivants :

Code HTML :

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

<div id="editor" contenteditable></div>

Code JavaScript :

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

1
2
3
4
5
6
7
$( function(){ // forme abrégée de $(document).ready(function(
 
    $( "#editor" ).on( "keyup", function( event ){
        console.clear();
        console.log( $( this ).html(), "\n", $( this ).text() );
    });
});

Lorsque je tape "Hello" suivit d'une frappe sur la touche "Enter", on passe à la ligne avec un décalage d'un caractère. J'obtiens dans la console :

Console was cleared dvp1.html:28 
Hello<div><br></div> 
Hello

Avec plusieurs retours à la ligne :

Console was cleared dvp1.html:28 
Hello<div>Comment ?</div><div>Pourquoi ?</div><div>Étrange !</div><div><br></div> 
HelloComment ?Pourquoi ?Étrange !

Alors que j'attendais :

<div>Hello</div><div>Comment ?</div><div>Pourquoi ?</div><div>Étrange !</div><div><br></div>

Si je réinitialise, et que je commence par un retour à la ligne avant de taper mon texte, j'obtiens le résultat espéré.

Si je modifie mon code HTML, j'obtiens aussi le résultat espéré, mais l'utilisateur peut effacer et alors on retombe dans le même problème.

Code HTML :

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

1
2
3
<div id="editor" contenteditable>
    <div><br></div>
</div>

Un bogue de Chrome ? Je ne sais pas.

[Golgotha]

Après plusieurs test, rangy à l'air de merdouiller si tu essaye de sauvegarder ton curseur sur une ligne vide.

Dailleur normalement, c'est pour sauvegarder une sélection, et non la position du curseur.

Dirige toi vers une autre lib.

[Clément.7]

Je vais essayer de me diriger vers une autre bibliothèque...
J'édite ce message dès que j'en ai trouvé (ou pas) une qui réponds à mes besoins

Merci de votre aide

Pourtant c'est bizarre... sur les tests de Rangy tout marche très bien même les lignes vides (http://rangy.googlecode.com/svn/trun...textrange.html)...

[Clément.7]

Étrange, d'après ce sujet (http://stackoverflow.com/questions/6...ter-dom-change) il semblerait que le module save/restore de Rangy fonctionne parfaitement pour ce type de problème, or ce n'est pas mon cas....

Quelqu'un a une idée sur le sujet ?

[Clément.7]

Je n'ai rien trouvé comme programme/script/bibliothèque me permettant de faire cela !
Quelqu'un connaîtrait-il une solution ?

[danielhagnoul]

Si on travaille avec des navigateurs non obsolètes, uniquement sur l'événement "keypress" et avec document.execCommand() il est assez facile d'insérer du texte ou du HTML à l'endroit voulu.

Code HTML :

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

<div id="divEditable" contentEditable></div>

Code JavaScript :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var editableEl = document.getElementById("divEditable");
 
editableEl.addEventListener("keypress", function(e) {
    var charTyped = String.fromCharCode(e.which);
 
    if (charTyped == "{" || charTyped == "(") { // ajout de "{}" ou "()"
        e.preventDefault();
 
        var sel = window.getSelection();
 
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
 
            range.deleteContents();
 
            var text = (charTyped == "{") ? "{}" : "()";
            var textNode = document.createTextNode(text);
 
            range.insertNode(textNode);
 
            range.setStart(textNode, 1);
            range.setEnd(textNode, 1);
 
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (charTyped == "€") { // ajout d'une image
        e.preventDefault();
 
        var sel = window.getSelection();
 
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
 
            range.deleteContents();
 
            sel.removeAllRanges();
            sel.addRange(range);
 
            document.execCommand('insertHTML', false, '<img src="../images/avatarDVJH.jpg" alt="Daniel Hagnoul" />');
        }
    }
}, false);

[Clément.7]

Effectivement, mais moi mon but n'est pas d'insérer du HTML mais bien de le modifier !
Par exemple :

lors de l'évènement onkeypress, je vais faire ça :

Code :

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

editor.innerHTML = editor.innerText.replace(/function/g, '<span style="color: blue;">function</span>');

et c'est ce qui me permets de faire de la coloration syntaxique...

Quelqu'un a une idée sur le sujet ?

[vandenn3]

Salut,

Les des éditeurs de texte JavaScript avec coloration syntaxique que j'ai vu ne remplaçaient pas le texte comme ça. Ils utilisaient un textarea, dans lequel le texte avait une couleur grise très clair ou même invisible, et derrière cette textarea il y avait un div dans lequel était copié le contenu du textarea à chaque fois qu'il changait. Et c'était ce contenu qui était coloré.
En opérant de la sorte, cela règle ton problème: plus besoin de devoir modifier un élément dans lequel il y a des parties de textes invisibles pour l'utilisateur (->par exemple ajouter des <span>, puis devoir positionner le curseur près de ces spans).

[NoSmoking]

(...)mais moi mon but n'est pas d'insérer du HTML mais bien de le modifier !

j'ai quand même du mal à voir la différence attendu que tu insères un élément SPAN !

[Clément.7]

OK merci beaucoup je vais essayer ça !

EDIT : Désolé je n'avais pas vu la page 2 sur mon smartphone; pour faire simple ça permettrait de corriger le problème qui fait que le curseur se déplace de manière intempestive et qui rend donc impossible "la rédaction" d'un fichier HTML etc.