Créer balise <p> dans div éditable avec positionnement du curseur

**Sanceray3** · 09/02/2010, 22h02

Bonsoir,

voilà je vous explique ce que j'aimerais faire et que je n'arrive bien évidemment pas à faire.

Je voudrais réaliser un petit WYSIWYG des plus simpliste avec juste la possibilité pour le moment de générer des paragraphes et des titres.

Ne souhaitant pas utiliser d'iFrame, j'ai fait le choix d'utiliser une simple div avec un contenteditable="true".

Ce que j'aimerais pour le moment c'est pouvoir au chargement de la page démarrer sur une balise <p> vide, pour que dès que la personne commence à saisir quelque chose dans la div, cela soit fait dans une balise paragraphe et non sans aucune balise. Je ne sais pas trop si j'ai été compréhensible là !

En gros si le gas me tape : "toto", j'aimerais que ça donne "<p>toto</p>" et non "toto".

J'ai essayé tout un tas de fonctions : append pour créer ma balise + set cursor.... mais je ne suis pas arrivé à faire ce que je voulais.

Savez vous comment je pourrais réaliser cela, avec quelles commandes....

Par avance grand merci pour votre aide et vos conseils.

Voici mon code épuré :

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
<html>
    <head>
        <title>Essai</title>
        <script type="text/javascript" src="Include/js/jquery/jquery-1.3.2.min.js" ></script>
        <script type="text/javascript">
            $(document).ready(function() { 
 
            });
        </script>
    </head>
    <body>        
        <div contenteditable="true" id="my_editeur" >
 
        </div>
    </body>
</html>

**danielhagnoul** · 10/02/2010, 18h34

Bonsoir.

La seule solution que j'ai trouvée, elle fonctionne sous Chrome4, Firefox3.6 et IE8 (reste à tester les autres), est d'inclure un espace insécable dans le paragraphe.

Code :

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

$("<p>&nbsp;</p>").appendTo("#myEditeur");

Lorsque l'utilisateur clique sur la division éditable, le texte qu'il insère est automatiquement placé après l'espace insécable et donc inclus dans le paragraphe.

Lors de la récupération du texte, il est possible d'enlever les espaces avant et après le texte en utilisant :

Code :

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