Mise en forme de texte dans un formulaire

Bonsoir !

Je recherche un script de formulaires (ressemblant étrangement à celui que nous utilisons ici) pour mettre en forme du texte (couleur et style) avant de l'enregistrer dans une table de base de données afin de le restituer ensuite dans une page web en php.

En connaissez-vous un ? Faut-il que j'en construise un moi-même ?

Merci de vos conseils !

Flat6

Bonjour flat6,
Le tutoriel de Fred Cavazza répond peut-être à ton attente?

Merci de ta réponse, Speed, mais malheureusement, ce qui est décrit dans ce tuto, je sais déjà le faire !

Ce que je voudrais, c'est savoir comment produire une textarea équipé de fonctionnalités telles que "gras", "italique", et éventuellement changer la couleur de certains éléments du texte qu'on tape dans cette textarea !

Mmmh il te faudrait alors chercher du côté de BBCode…

Bon courage!

Peut-être WYMeditor avec jQuery?

Bonjour,

FCKeditor, TinyMCE, etc. C'est affreusement merdique, on a intérêt à limiter au maximum les possibilités offertes à l'utilisateur pour produire du code HTML foireux, mais on n'a pas vraiment mieux.

WYMeditor est peut-être un peu mieux, ça reste à voir.

Sinon, il reste les syntaxes textuelles telles que BBcode et Markdown. Elles peuvent être associées à une barre d'outils (boutons associés à des actions en JavaScript), telle que Markitup par exemple. Ça limite les possibilités, ce qui est bien, mais ça peut gêner certains utilisateurs (à voir). Markdown + Markitup + live preview, ça peut être sympa.

Hello,

j'ai mis à disposition WYMeditor il y a peu et une fois le contenu saisi les pages sont toujours valides...

Il faut dire que j'ai limité aux maximum les fonctionnalités et que le nombre de pages est restreint mais je trouve qu'il est à tester.

My 2 cents...

Merci de vos nombreuses réponses !

Markdown pourrait me convenir, WYMeditor aussi, mais malheureusement, ces deux éditeurs semblent ne pas gérer la couleur du texte !

j'ai mal vu ou mal lu peut être ?

Flat6

flat6 a écrit :
mais malheureusement, ces deux éditeurs semblent ne pas gérer la couleur du texte !

Tu veux dire heureusement, j'espère?

Un site web à l'atour professionnel fonctionne ainsi: des styles pour les éléments de texte (notamment les paragraphes, titres de divers niveaux, blocs de citation, tableaux, etc.) sont définis, dans le respect d'une charte graphique de l'entreprise ou du site. Si la charte graphique le prévoit, on peut avoir une certaine liberté de choix entre plusieurs styles graphiques pour un même élément, mais ces styles sont définis au préalable et sont généralement peu nombreux, pour garder une cohérence d'ensemble. Ils sont implémentés en CSS grâce à des classes (par exemple: "exergue1", "exergue2", "tableau-simple", "tableau-complet", etc.).

Le rôle de l'éditeur (personne) n'est pas de rajouter du rouge, du bleu, du rose ou du Comic Sans, mais de choisir dans la palette prédéfinie.

Le rôle de l'outil d'édition est alors de donner accès aux différents éléments (type de bloc de texte) et styles prédéfinis (classes), si possible avec une prévisualisation qui va bien.

Sur ce dernier point, Markdown est en effet limité (il ne donne accès qu'aux éléments, pas aux classes, pour ces dernières il faut basculer sur de l'édition HTML dans le contenu en syntaxe Markdown), de même que pour la génération de tableaux ou de widgets multimédias par exemple. WYMeditor est déjà plus complet (mais un peu moins fiable à l'utilisation). D'autres éditeurs tels que TinyMCE sont très complets, mais beaucoup moins fiables (comme dit précédemment).

Justement !

Mon site est en CSS, et j'aimerais pouvoir paramétrer WYM, par exemple, pour qu'à telle partie du texte soit appliquée telle ou telle classe !

Je ne veux pas que l'utilisateur du site sur lequel je bosse en fasse un arbre de noël !

C'est pas compliqué, j'ai besoin de 2 fonctions : texte normal ou titre (en gras + blanc).

Rien d'autre !

WYM ne peut pas donner accès aux classes ?

flat6 a écrit :
Bonsoir !
Je recherche un script de formulaires (ressemblant étrangement à celui que nous utilisons ici) pour mettre en forme du texte (couleur et style) avant de l'enregistrer dans une table de base de données afin de le restituer ensuite dans une page web en php.
En connaissez-vous un ? Faut-il que j'en construise un moi-même ?
Merci de vos conseils !
Flat6

Bonjour, je me demandes toujours a quel niveau en est celui qui pose la question ...

Si tu connais a peut-prés javascript, tu as compris que l'éditeur le plus élémentaire qui par exemple n'aurait qu'un seul bouton (mettre en gras), injecte en fin de texte un BBCODE genre "b" "/b" ou si une zone a étée mise en évidence il mettra cette balise AUTOUR de la zone texte sélectionnée !

avec des crochets mais je ne peut les mettre ici bien sur

ça c' est élémentaire,

Tu as aussi compris que c'est ce qui ira dans mYSQL, et qu'a la relecture les []
seront tout bêtement convertis en vrais balises.

Alors si tu as compris ce mécanisme tu peux ajouter 1000 fonctions dont la couleur ...

Comme ici

<option style="color:black;" value="black">Noir</option>
<option style="color:darkred;" value="darkred">Rouge foncé</option>
<option style="color:red;" value="red">Rouge</option>
<option style="color:orange;" value="orange">Orange</option>
<option style="color:brown;" value="brown">Marron</option>
<option style="color:yellow;" value="yellow">Jaune</option>
<option style="color:green;" value="green">Vert</option>
<option style="color:olive;" value="olive">Olive</option>
<option style="color:cyan;" value="cyan">Cyan</option>
<option style="color:blue;" value="blue">Bleu</option>
<option style="color:darkblue;" value="darkblue">Bleu foncé</option>
<option style="color:indigo;" value="indigo">Indigo</option>
<option style="color:violet;" value="violet">Violet</option>
</select></div>

donnes moi ton avis , si tu comprends 100% aprés on verra !
Modifié par FoxLeRenard (17 Apr 2009 - 19:25)

Pour ma part j'utilise depuis longtemps un système ultra simple qui donne d'excellents résultats. Un genre de markdown si on veut :

Un texte avec un **passage en gras**, un autre *en italique* et un troisième en ***gras italique***

avec par derrière une simple regex qui transforme le tout en :

Un texte avec un <strong>passage en gras</strong>, un autre <em>en italique</em> et un troisième en <strong><em>gras italique</em></strong>

Un texte avec un **passage en gras et au milieu un autre *en italique* puis retour en gras simple** marche aussi.

Y'a plus simple ni plus fiable à mon goût. Seul problème : si l'auteur veut entrer l'astérique comme élément de texte. Comme c'est finalement assez rare il entre (*) et le tour est joué. La regex reconnaît les parenthèses.

Pas de javascript, pas d'embrouilles.

La regex pour <em> :

$chaine = preg_replace('`\\*([^\*]+)\\*`s', '<em>$1</em>', $chaine); 

Pour les autres besoins tu bricoles, genre :

$chaine = preg_replace('`\\*([^\*]+)\\*`s', '<span>$1</span>', $chaine); 

où span sera défini comme color:white en CSS
Modifié par Arsene (17 Apr 2009 - 19:57)

Fox> Pour répondre précisément à ta question, je ne suis pas très compétent. J'ai appris à développer (si à mon niveau on peut appeler ça ainsi) avec le bouquin CSS2 de Raphael Goetter (que j'ai étudié de A à Z) et le tuto sur php/mySQL qu'on peut trouver sur le site du Zéro (sur lequel j'ai passé de très nombreuses heures) !

Je ne suis pas un professionnel du tout mais plutôt un bidouilleur ! Mais bon... tout ça me passionne ! Je développe en ce moment un petit programme en php qui permet de gérer ses comptes. Je ne le fais que pour moi, tout simplement parce que ça me plaît !

C'est vrai que j'ai une grosse carence de compétences sur un point : le Javascript. Je n'y connais pratiquement rien...

Bon alors on peut t'aider a le faire ton éditeur, mais ça veut dire que même si je te donnes un javascript pret a l'emploie, il faudra que tu récupéres la saisie le mettre dans une base MYSQL puis plus tard la relire et restituer les HTML en couleur !!

ça peut le faire ?

Avec un peu de retard, je voulais dire que WYMeditor permet d'utiliser ses propres classes, c'est parfaitement visible dans cet exemple.