Position du curseur dans une divRésolu

Question

Bonjour tout le monde,

Dans le cadre de développement d'un site web, j'aimerais tranformer une div en textarea, pour cela j'utilise le javascript car je ne dispose d'aucune connaissance en java.
Le but finale est de pouvoir disposer d'une zone de texte éditable semblable à celle qui permet de poster ce même message, avec une mise en forme directement visible lors de l'édition.

Pour ce faire j'ai commencé à réaliser quelques fonctions (L'ajout de texte, l'insertion du code, les retours à la ligne, backspace et suppr) mais là ou j'aurais besoin de votre aide si préciseuse c'est pour récupérer la position du curseur au clique pour pouvoir insérer du texte au milieu de la zone éditable par exemple.

J'ai essayé d'utiliser les fonctions de createRange() et getCaret (ou quelque chose de semblable) mais cela me retourne toujours "Undefined"

Si je ne suis pas suffisement clair, n'hésitez pas à me demander de détailler d'avantage.

Maxime

Bul3 · Accepted Answer

bonjour,
>>j'aimerais tranformer une div en textarea,
textarea.value=div.innerHTML

>>Le but finale est de pouvoir disposer d'une zone de texte éditable semblable 
>>à celle qui permet de poster ce même message
une saisie wysiwyg ? alors ton div ça va être exclusif IE.
pour être compatible, utiliser un iframe
un ch'tiot exemple ici
mais foultitude d'autres partout

>>pour pouvoir insérer du texte au milieu de la zone éditable
si c'est dans la zone "wysiwyg", regarde mon exemple
si c'est dans le textarea, regarde dans les sources de PetoleTeam,
    il y a un script généralisé nickel.
Cordialement

          [mon Site] [M'écrire] Bul

cs_Dj Nam · Answer

Merci beaucoup pour ces informations, il s'agit effectivement d'un systeme wiswig pour des personnes ne connaissant pas l'html =)

Je vais donc utiliser les iFrames comme tu me l'as conseillé, et je vais aussi de ce pas regarder ton exemple, je reviendrais par ici si j'ai besoin d'éclaircir des informations et que je ne trouve pas satisfaction sur les moteurs de recherches.

Encore merci

Maxime

cs_Dj Nam · Answer

Encore merci pour ce code qui est exactement ce que je cherchais, je ne sais pas pourquoi, je m'étais mis en tête que les iFrames en plus d'être génantes pour le référencement, étaient compliqué d'utilisation .. A ce que je vois je me suis un peu trop basé sur les préjugés...

D'ailleurs j'aimerais avoir quelques précisions sur la fonction execCommand()

Si j'ai bien compris, cette commande accepte entre 1 et 3 paramètres, le premier étant le nom de la fonction a executer. Mais où puis-je trouver la liste des commandes préexistantes ?

J'aimerais aussi ajouter un bouton pour insérer un tableau (en html) avec avant, une fenetre qui demande le nombre de lignes et de colones à insérer. Existe-t-il là aussi, pour ma plus grande surprise, une fonction qui permet de faire cela ?

Maxime

Bul3 · Answer

>>en plus d'être génantes pour le référencement, étaient compliqué d'utilisation
ni l'un ni l'autre
dans un cas comme ici, mais pas seulement.

>>Mais où puis-je trouver la liste des commandes préexistantes ?
presque tout est dans le script
après le mieux c'est une moteur de recherche : regarde ici ;o)

>> pour insérer un tableau (en html)
ça existe dans execCommand !

         [mon Site] [M'écrire] Bul

cs_Dj Nam · Answer

Merci, mais j'ai effectivement fais quelques rechreches sur ce fameux moteur de recherche et j'arrive à m'en sortir.

Maintenant un autre problème se présente face à moi.
Lors du chargement de la page contenant cette iframe je crée une variable php du nom de $contenu
Celle-ci fonctionne comme il se doit (j'ai vérifié)
mais lorsque je veux au chargement de la page affichier le contenu de cette variable dans la iframe, elle reste vide.. Ou presque, car lorsque j'effectue un clique droit sur la page et que je choisis "Afficher le code source" il s'avère que mon texte est bien présent dans ma iframe.
Comment se fait-il qu'il ne soit alors pas visible ?

Sachant que l'affichage se fait lors de l'appelle de la fonction initial() du code précédement cité.

Maxime

Bul3 · Answer

bah... essaye sans le php...
toto    par exemple
car je suppute ( mais sans l'être ) que c'est ce que tu fais ?
           [mon Site] [M'écrire] Bul

cs_Dj Nam · Answer

En faite c'est bien plus compliqué qu'il ne parait. Parce que même en mettant le code directement donc par exemple : test le problème est le même, le code source est ok, mais le contenu ne s'affiche pas. En revanche lorsque je fais un clique droit sur la iframe pour afficher la source voici ce qui apparait : et c'est tout.

Bul3 · Answer

ben oui ! pas du à quoi que ce soit d'autre qu'à l'utilisation la balise !
ce que tu met entre  et , c'est pour
afficher lorsque le navigateur ne supporte pas les [I]Frame.
c'est ce qu'il y a dans le src qui est affiché 
 ou ce qu'on met dans le Champ.body.innerHTML 
 ( Champ est différent entre IE et FF )
          [mon Site] [M'écrire] Bul

cs_Dj Nam · Answer

Pour le moment voilà ou j'en suis, à la fin de la fonction initial()
je charge le contenu ($contenu) dans la textarea, jusque là ok.

Après j'ai fais cela :
var tmp=document.getElementById("apercu_area");
Champ.body.innerHTML=tmp.value;
sachant que l'élément qui a l'id "apercu_area" c'est ma <textarea>
mais quand j'affiche les erreurs de script il me dit : "Champ.body est indéfini" alors que si je fais alert(Champ); cela fonctionne corrèctement, ma variable est bien définie.

Maxime

cs_Dj Nam · Answer

Juste une petite erreur,
ma ligne de code ce n'est pas :
Champ.body.innerHTML=tmp.value;
mais :
Champ.body.innerHTML=tmp.innerHTML;

Maxime

Bul3 · Answer

ben oui alors... un textarea c'est .value pas .innerHTML.
     [mon Site]  [M'écrire]  Bul

cs_Dj Nam · Answer

Oui j'ai vu cela, mais on en reste sur le même problème :
"Champ.body à la valeur null ou n'est pas défini"

Maxime

Bul3 · Answer

>>"Champ.body à la valeur null ou n'est pas défini" ah ah .... essaye après le onload ? ça baigne.... ne me demande pas pourquoi ! [mon Site] [M'écrire] Bul

cs_Dj Nam · Answer

Ok, merci bien dans ce cas je vais revoir mon code en me basant sur celui-là, on verra bien ce qu'il en ressortira. Et comme d'ab, si j'ai encore une erreur je reviendrais ici

Maxime

cs_Dj Nam · Answer

Finalement tu as utilisé un .value pour la textarea ? Etrange, mais je vais essayer, jamais ne sait-on

Maxime

Bul3 · Answer

ben oui ! comme j'ai disais, un textarea
possède un .value et pas de .innerHTML
          [mon Site] [M'écrire] Bul

cs_Dj Nam · Answer

Rien à faire, quand je fais alert(Champ.body); ca me retourne : "null"

Maxime

cs_Dj Nam · Answer

de la même manière un .innerHTML sur mon textarea me renvoi le contenu, alors qu'un .value est vide

Maxime

Bul3 · Answer

bah.. essaye simplement l'exemple que je t'ai mis...
ça baigne.
donc tu dois avoir un zouzou je ne sais où....
[mon Site][M'écrire]Bul

PetoleTeam · Answer

Bonjour, ...une autre approche pour l'accés au contenu dune IFRAME, sur les différents navigateurs... var O_iFrame = document.getElementById( 'ID_IFRAME').contentWindow.document; pour reprendre l'exemple de TheBul3 cela donne... Retour à ton sujet... ----, Rien à faire, quand je fais alert(Champ.body); ca me retourne : \"null\" de la même manière un .innerHTML sur mon textarea me renvoi le contenu, alors qu'un .value est vide

...n'inverses tu pas simplement les réfèrences ? ;O)

cs_Dj Nam · Answer

Etant donné que la variable Champ fait référence à l'iframe et que je veux le contenu de celle-ci il faut bien que j'utilise Champ.body l'ordre est donc corrècte.
Je vais essayer de prendre vos codes séparément pour voir si cela fonctionne ou non.

Maxime

cs_Dj Nam · Answer

J'ai trouvéééé !!!
le problème vient de la ligne suivante :

Champ.designMode='On';

j'ai placé ce code :
alert(Champ.body); //Retourne : [Object]
Champ.designMode='On';
alert(Champ.body); //Retourne : null

Il me suffit donc d'inverser deux lignes, et le tour est joué !

Maxime

cs_Dj Nam · Answer

Evidement je suis allé un peu trop vite ...

Effectivement le problème venait de cette ligne, mais il reste sur cette ligne car si j'inverse l'ordre des instructions le texte s'affiche,
et lorsqu'arrive cette même instruction, il est à nouveau effacé.
Comment puis-je faire pour éviter cela ?

Maxime

Bul3 · Answer

le souci uniquement avec IE ( enfin.. IE8 chez chez moi !) pas expliqué, mais en attendant.... un ch'tiot setTimeout des plus experts devraient te dire why et comment faire fonctionner sans ce setTimeout... disons curieux j'ai déjà eu le même phénomène avec FF (2) dans d'autres circonstances. [mon Site] [M'écrire] Bul

PetoleTeam · Answer

Bonjour, l'explication, enfin une amorce, concernant le setTimeout est que IExplorer détruit le contenu de l'objet et il lui faut donc un laps de temps pour le recréer. exemple pour visualisation : ...donc setTimeout incontournable avec une IFRAME... ;O)

cs_Dj Nam · Answer

Encore merci pour ces informations complémentaires, je vais voir ce que je peux faire afin de régler ce dernier petit souci.

Maxime

Bul3 · Answer

alors si PetoleTeam nous dit :
          ...setTimeout incontournable avec une IFRAME...
guère d'autres possibilités pour palier à ce  dysfonctionnement,
si dysfonctionnement il y a,  d'IE...
          [mon Site] [M'écrire] Bul

PetoleTeam · Answer

Bonjour, ----, ... setTimeout incontournable avec une IFRAME...

dans ce contexte avec les méthodes utilisées. reprenons l'exemple ci dessus mais en changeant la technique d'écriture ...pas de problème constaté, dans ce cas avec IExplorer , de par la méthode open, le setTimeout devient implicite. Remarque : Il suffit de mettre un alert( O_iFrame.firstChild.nodeName); pour voir que le document est bien un document HTML, même si l'on n'a pas rajouté les balises qui vont bien. ----, ...palier à ce dysfonctionnement, si dysfonctionnement il y a, d'IE...

Il ne s'agit que d'une façon différente de gérer ce changement d'état, l'IFRAME n'étant, à ma connaissance, pas fait pour cela au départ. ;O)

Position du curseur dans une div

28 réponses

Votre réponse

Discussions similaires