Style dans un textarea

Version imprimable

19/11/2009, 17h31
CactO_o's

Style dans un textarea

Bonjour à tous,

Dans le cadre de mon projet personnel je suis en train d'essayer de faire un formulaire WISIWIG (What I See Is What I Get).

Formulaire WISIWIG ?

Un formulaire WISIWIG est une sorte de mini-office en ligne, ou l'utilisateur pourrait changer la mise en forme du texte sans voir de balise (HTML ou créer comme sur celui -ci [ [B ] => <strong >] ).

Exemple

Comme exemple on pourrait prendre CKEditor qui font un très bon job.

Problème

Le problème ce pose maintenant, je n'arrive pas à comprendre comment on peux rendre un bloque éditable (par le texte) et qui prend en compte en même temps la mise en forme du texte (balise HTML)

Pour rendre un texte éditable il n'y à pas de problème :
Code : HTML

Code:

<textarea>Du texte, du texte et encore du texte.</textarea>

Mais si l'utilisateur veut une partie de son texte rouge :
Code : HTML

Code:

<textarea>Du texte, du texte et <span style="color:red;">encore</span> du texte.</textarea>

Le résultat sera :
Du texte, du texte et <span style="color:red;">encore</span> du texte.

Et non :
Du texte, du texte et encore du texte.

Si quelqu'un avait la possibilité de m'aider ?? Car je ne voix vraiment pas la solution !

Merci à tous !
19/11/2009, 18h49
Lcf.vs

Je ne pense pas que tu sois dans la bonne rubrique pour avoir une aide efficace à ta question...

A mon sens, ce serait plutôt en javascript...
19/11/2009, 20h30
CactO_o's

Le problème ne vient pas de rajouter ou pas les balises dans le textarea, cette partie est déjà réalisé.

Le problème est de mettre du style dans un textarea... Que ce soit au chargement de la page ou après modification avec du JavaScript ^^
20/11/2009, 17h08
thelvin

On ne met pas de balise ou de style dans un <textarea>.

Pour l'heure, les éditeurs wysiwyg dans le web restent des bricolages géants à coup de JavaScript, raison pour laquelle il vaut mieux ne pas essayer de faire le sien, mais en prendre un qui existe déjà.

Par exemple, TinyMCE (le seul dont j'ai entendu parler,) mais il y en a d'autres.
20/11/2009, 17h56
CactO_o's

Le problème est que je ne veux pas avoir à faire a des licences restrictive car il y a de grande chance que le projet final soit vendu et une licence GPL m'en empêche...
20/11/2009, 18h21
kaiser59

Salut,

Dans ton cas, pourquoi Textarea ? Ne serait-il pas plus approprié de mettre un div ?
21/11/2009, 16h18
CactO_o's

Citation:

Envoyé par kaiser59

Ne serait-il pas plus approprié de mettre un div ?

Une div est en effet plus approprié, Mais elle ne permet pas le traitement de texte (ajout de lettre, curseur, etc...)

A moins de ce faire ch*** à simuler ça avec un caractère | [pipe] et gérer chaque touche du clavier quand la div à le focus...
21/11/2009, 20h35
Bovino

Habituellement, les éditeurs wysiwyg superposent un textarea (pour l'édition du texte) et une iframe (pour le rendu visuel) et synchronisent les deux.
22/11/2009, 12h28
CactO_o's

J'ai entendu parler d'une utilisation possible d'une div avec 'contentEditable' mais impossible de trouver :
- comment l'utiliser
- sa portabilité (IE / FF / Saf /... )
22/11/2009, 17h14
Bovino

C'est effectivement quelque chose qui existe, mais très difficilement adaptable de façon WYSIWYG.
D'une part, contentEditable permet essentiellement de modifier du texte. Cela implique une bonne connaissance des objets JavaScript Range qui est probablement l'objet le moins cross-browser de JavaScript.
Ensuite, pour la mise en forme, il faut le coupler avec des instructions execCommand, qui elles aussi sont loin d'être portables (à titre d'exemple, avec IE, tu es obligé d'avoir une sélection pour faire une modification, y compris l'ajout d'un <hr />).
Enfin, c'est une chose de parvenir à modifier le contenu et le style de la page, reste après à sauvegarder les modifications ! Chose actuellement impossible à faire en JavaScript !
22/11/2009, 23h16
thelvin

Citation:

Envoyé par CactO_o's

Le problème est que je ne veux pas avoir à faire a des licences restrictive

La plupart ds solutions existantes sont sous licence GPL ou LGPL, on en peut pas dire que ça soit très restrictif.

Avec une licence LGPL, le pire qui puisse arriver, c'est qu'il y ait besoin de modifier le code qui fait cet éditeur wysiwyg. Dans ce cas-là, les modifications doivent elles-mêmes être soit LGPL, soit distribuées à personne. Je ne vois aucun problème à ces deux alternatives. Rappelons-nous que tout ça fonctionne par JavaScript. Le code source est donné avec le programme par définition.

Avec une licence GPL, il vaut mieux clarifier d'abord avec les auteurs pourquoi ce n'est pas LGPL, mais normalement ça ne change rien : le fichier JavaScript sous GPL ne participe pas à l'édition de liens de l'exécutable que tu livres.

D'ailleurs, si tu as de bonnes raisons, il y a peut-être moyen de négocier une licence d'utilisation adaptée à tes besoins auprès des auteurs.

Citation:

car il y a de grande chance que le projet final soit vendu et une licence GPL m'en empêche...

Absolument rien n'empêche de vendre des programmes sous GPL, le problème étant juste que personne ne va l'acheter puisque n'importe qui a le droit de le diffuser gratuitement.

Absolument rien n'empêche de vendre une solution logicielle qui utilise du GPL en tout ou en partie. C'est tout. Il ne faut pas chercher à cacher que c'est du GPL ou du LGPL, et il n'y a de toute façon aucune raison de le faire.

En conclusion, tu devrais te renseigner : l'existant est là, marche, et ne coûte que le savoir-faire d'intégration, qui est très très simple. Oui, il faut vérifier qu'il n'y a pas de problème avec les licences, et c'est probablement le cas. Mais tu as tout à y gagner.
Sauf bien sûr si l'éditeur wysiwyg est ton cœur de métier, mais dans ce cas-là c'est un peu gonflé de venir demander de l'aide gratis.
23/11/2009, 11h33
kaiser59

ok je voyais plus du coté utilisateur final que pendant le traitement.

Saisie du texte dans un textarea mais à la validation cela n'enregistre pas dans un textaera mais bien dans un div donc au final, cela ne dérange pas de mettre de la couleur dans un texte (ou mot)

Pour information, les éditeurs genre Tiny je ne sais pas trop quoi :D souvent propose d'alterner entre le text et le format HTML donc regarde le code qu'il propose ;)

Même l'éditeur du forum à titre d'exemple, propose aussi un texterea pour écrire, propose des balises pour modifier le texte mais au final tu ne vois pas les balises du texterea mais réadapter.
23/11/2009, 14h27
CactO_o's

@Bovino : Merci pour toutes ces précisions, je vais donc abandonné cette idée de contentEditable, au pire je laisse les deux cadres (textarea avec balises / div d'aperçu non editable) même si sa me chagrine de ne pas avoir un éditeur vraiment WYSIWYG... ^^

@thelvin : en faite je dois avoué que je ne connais pas réellement les restrictions des différentes licences..
J'ai regardé pour utiliser CKEditor qui contient une triple licence (GPL, LGPL et MPL) et on voit en bas de page le prix pour chaque utilisation...

J'en ai donc conclu que pour avoir le droit d'utiliser CKEditor à des fin payante je ne pouvait pas l'utiliser gratuitement...

Qu'elle est la limite d'utilisation (gratuite) d'un plugin en licence GPL ?
Je sais (crois savoir?) que toutes modifications est autorisé mais doit être disponible pour toutes demandes. (?)

Pour informations je ne cherche pas à vendre un simple éditeur complet mais un kits complet (qui est déjà bien avancé). L'éditeur WYSIWYG ne sera qu'une infime partie du kits et ne justifiera pas le prix.
De plus il faut savoir qu'un kit gratuit sera disponible et il contiendra l'éditeur de texte, les parties payantes permettront d'accéder à un kit plus complet.

D'un autre côté l'utilisation d'un plugin déjà existant me chagrine un peut car il est bien sûr moins modifiable qu'un créer soit-même. J'ai par exemple déjà créer un colorPicker bien plus évolué que celui de CKEditor et j'aurai préféré utiliser le mien plutôt que leur liste de quelques couleurs...
Un plugin sera toujours moins configurable... :s
23/11/2009, 19h16
thelvin

Citation:

Envoyé par CactO_o's

@thelvin : en faite je dois avoué que je ne connais pas réellement les restrictions des différentes licences...

Ce n'est pas plus mal de demander l'avis de l'avocat de l'entreprise ou quelque chose de ce genre.
Mais ce qu'il faut comprendre, c'est que c'est pas compliqué.

Citation:

J'ai regardé pour utiliser CKEditor qui contient une triple licence (GPL, LGPL et MPL) et on voit en bas de page le prix pour chaque utilisation...

J'en ai donc conclu que pour avoir le droit d'utiliser CKEditor à des fin payante je ne pouvait pas l'utiliser gratuitement...

Conclusion erronée. La page dont tu parles explique clairement les raisons de l'existence de licences payantes. En gros, c'est pour les entreprises qui ne veulent pas de logiciel libre, et c'est tout. Leurs raisons ? Ça nous regarde pas, elles n'en veulent pas et c'est tout. Des licences commerciales sont prévues pour ça.
Il arrive parfois qu'il y ait de bonnes raisons, et qu'une licence commerciale ad hoc puisse résoudre le problème. Et donc, c'est prévu.

Citation:

Qu'elle est la limite d'utilisation (gratuite) d'un plugin en licence GPL ?

D'utilisation, aucune. C'est d'ailleurs l'une des lois de l'open source.

Citation:

Je sais (crois savoir?) que toutes modifications est autorisé mais doit être disponible pour toutes demandes. (?)

Pas tout à fait. Toute modification est autorisée, mais si les modifications, ou le programme modifié, sont distribués à qui que ce soit, ils doivent être distribués sous licence GPL. Pas le choix.
Distribués sous licence GPL, ça veut dire que le code source doit être fourni à quiconque on distribue le programme, ou au moins s'ils en font la demande. Ils disposeront du même droit d'utiliser le programme sans restriction, et de le modifier.
Mais cette contrainte ne s'applique qu'à la partie de ce que tu livres qui est sous GPL. Pour être plus précis, c'est le cas avec LGPL. Le GPL, c'est plus compliqué, mais dans le cas de simples fichiers javascripts à inclure, GPL et LGPL sont équivalents. À vérifier quand même auprès des auteurs, au cas où. Dans le cas de CKEditor, de toute façon, tu prends celle que tu veux.

Citation:

D'un autre côté l'utilisation d'un plugin déjà existant me chagrine un peut car il est bien sûr moins modifiable qu'un créer soit-même. J'ai par exemple déjà créer un colorPicker bien plus évolué que celui de CKEditor et j'aurai préféré utiliser le mien plutôt que leur liste de quelques couleurs...
Un plugin sera toujours moins configurable... :s

C'est une bonne raison. Simplement, faire un éditeur wysiwyg de ce genre, c'est compliqué. Le html, même html5, ne propose rien pour ça. L'état de l'art actuel est d'inclure un éditeur wysiwyg qui existent déjà pour pallier à ce manque.
23/11/2009, 20h28
CactO_o's

Merci à toi thelvin pour ces précision, j'avais en effet pensé à demandé à un avocat mais je n'en avait pas encore trop eu l'occasion..

En tout cas vu que les plugins sont en JavaScript tout est à disposition de l'utilisateur et donc la licence GPL n'est pas restrictive (si j'ai bien compris).

Après reste à savoir si j'utilise un plugin et que j'essaye de l'adapter un maximum ou si je crée le mien sachant que créer le mien peut être aussi poussé que CKEditor (wysiwyg pur) ou plus simple (textarea avec balises + div aperçu final)
26/11/2009, 14h51
CactO_o's

Ayant tout compte fait décider de partir de rien pour faire mon propre plugin (afin de mettre en place exactement les boutons voulu, comme mon colorPicker).

Je ne trouve vraiment pas comment faire pour gérer l'iframe comme le font tous les éditeurs de textes WYSIWYG du net, j'ai pourtant étudier le code de pas mal d'éditeur (celui de Gmail, CKeditor, TinyMCE, ...) et je n'arrive vraiment pas à comprendre leur fonctionnement..

Je m'en remet à vous en espérant que quelqu'un pourrait me mettre sur la voie, je ne demande pas un code mais une simple explication, un tutoriel, une piste..

Merci à tous !