Jump to content
Sign in to follow this  
Spark

Editeur de texte, comme sur un forum !

Rate this topic

Recommended Posts

Bonjour tout le monde.

Je suis en train de faire la partie administration de mon site, et je voudrais faire une page d'administration pour ajouter/éditer les tutos. mais je ne sais pas du tout comment m'y prendre. Est ce que je fait un truc perso, est-ce que j'utilise un code tout prêt. En plus je veux que le texte soir valide xHTML.

J'aurais bien voulu exploiter les balises <h1> <h2> etc ... pour les titre (portabillitée des thèmes, oui bon pour le moment y'en a qu'un ^^), mais cela implique que l'utilisateur (heuu pour l'instent moi) mette les balise <p> autour du texte (si vous voyez ce que je veux dire).

Enfin voilà je pense à beaucoup de chose mais point de vue codage j'aimerais déjà me faire une idée pour ne serais-ce que insérer une balise ouvrante puis fermante dans un textarea sur le simple clique sur un bouton (à oui j'ai failli oublié de faire mention de la prévisualisation). Ca fais des moi que je n'ai plus touché au site juste à cause de ceux gros gros morceau qui me laisse dubitatif. :blink:

Je voudrais vos conseils et des liens vers des tutos et surtout des mot clés pour mes recherches.

Merci d'avance :)

Share this post


Link to post
Share on other sites

Salut,

Je vais faire un peu de pub pour un logiciel libre qui s'appelle BBComposer ;)

Le principe est simple, de ton côté tu crées un <textarea> avec l'attribut id renseigné.

De l'autre, tu installes l'extension BBComposer sur ton browser préféré, c'est à dire, Firefox. Non, ne dis rien, c'est ton navigateur préféré... wink.gif

Et tu peux éditer tes messages en XHTML 100% conforme avec les balises h1 à h6, mais aussi toutes les balises sémantiques (ul, ol, dl, em, strong, cite, q, blockquote, acronym, abbr, code, del, ins, etc... etc...). Tu peux, en plus, ajouter des CSS (tout CSS2 est supporté sauf le positionnement) et une collection complète de smiley et de clipart peut être utilisée pour illustrer tes tutoriels. L'upload d'images se fait par drag n' drop, simplement.

Et, de plus, avec la nouvelle version 0.7 (qui sort dans quelques jours mais que tu peux télécharger avant tout le monde ici), tu as la possibilité d'enregistrer le contenu de l'éditeur pour le reprendre après.

Voilà, je prêche pour ma paroisse, mais je pense, en toute modestie, que je peux en être fier. Je suis dispo. si tu as besoin d'aide.

PS : Tu peux faire des dégradés de couleur, accessoirement et aussi, poster dans les forums, dans le CMS Spip et dans les wikis Wikimédia.

Share this post


Link to post
Share on other sites

Après, c'est une question de vision des choses. L'éditeur WYSIWYG doit-il faire parti du site ou du navigateur ? Pour moi la deuxième option est la meileure en ce sens que :

  • c'est déjà possible (j'ai cité BBComposer pour FF, mais pour IE, on trouve aussi XStandards, un peu moins pratique, mais plus complet).
  • Ca facilite les mises à jour ainsi que la migration d'un éditeur à l'autre.

C'est ce qu'on peut appeler, la liberté. Et puis, après, on peut tout imaginer, genre des templates types par types de contenu, je pense notamment à programme XUL (scenari) que j'ai vu y'a pas longtemps qui impose un certain format pour l'édition etc... etc...

Edited by froidure_nicolas

Share this post


Link to post
Share on other sites

Personnellement je préfère l'option éditeur de texte intégré au CMS. Je n'ai pas besoin d'installer quoique ce soir sur la machine et je ne suis pas "marié" à un navigateur spécifique. Je te conseille WYMEditor &lt;http://www.wymeditor.org/fr/>. Le gros avantage c'est qu'il génère du code conforme et parfaitement structuré. TinyMce, plus connu, reste un bon compromis.

Share this post


Link to post
Share on other sites

Ben, oui et non, je préfère dans le site, car je ne sais pas forcement sur quel ordinateur je ferais mes mises à jours.

Un exemple tout bête, je vais chez un client leur montrer mon savoir-faire, et aussi leur présenter ma solution de gestion en-ligne.

Sauf que dans la majeure partie des cas la démonstration se fait sur leur matériel (pour éviter tout ce qui est problème de paramétrage de connection internet), donc il faut lors de la démo, installer l'applicatif sur le poste, à oui, mais c'est pas toujours possible :

- les stratégies de sécurités du service informatique du client font que l'on peut rien installer sans leur demander

- le client n'a pas encore signé pour notre produit, il est du coup frileux d'installer un applicatif qu'il n'achètera pas en fin de compte...

Un autre problème des solution intégré au navigateur : Demain le client change d'ordinateur, mais souvent on rencontre le problème des applicatifs à installer, tu peux être certain que dans 85% ton applicatif aura été oublié, en plus coup de bol, le gars qui gère le site est une bille en informatique, tu peux être sûr qu'il va t'appeler parce qu'il n'arrive plus à mettre à jour le site. Tu auras beau lui dire, "Allez à telle adresse, télécharger, et installer tel applicatif", et bien, si on vient pas lui faire, il sera perdu (j'ai eu le cas avec plusieurs client, ne serait-ce que pour changer la configuration outlook)

Au moins, une solution intégrée dans le site comme Tiny MCE (qui est très bien, et qui offre un maximum de compatibilité navigateur) permet de ne rien installer, rien à paramétrer pour le client. (WYMEditor est très bien aussi, mais à mon humble avis un tout petit moins intuitif que Tiny MCE)

Edited by Dadou

Share this post


Link to post
Share on other sites

Merci à tous pour vos réponses.

Je vais me pencher sur Wymeditor car comme l'a dit nicoo je ne souhaite pas être marier à mon navigateur, puis je ne serais pas le seul à utiliser l'admin, je ne souhaite pas imposer l'installation d'un programme tiers. Pourquoi Wymeditor plutôt que Tinymce ? Le Français bien sur :D. Mais si je ne parviens pas l'utiliser, je me tournerais vers BBComposer.

Encore merci :)

Share this post


Link to post
Share on other sites

TinyMce est traduit en français mais préfère quand même WYMEditor ;)

Share this post


Link to post
Share on other sites

J'ai testé WYMEditor, ça fonctionne très mal. Je vais tester TinyMce.

Share this post


Link to post
Share on other sites
J'ai testé WYMEditor, ça fonctionne très mal. Je vais tester TinyMce.

Ton jugement me parait sévère, s'il est intégré dans des CMS de la qualité de Drupal c'est qu'il ne doit si mal fonctionner. Peux-tu nous donner plus de détails sur les problèmes que tu as rencontré ?

Share this post


Link to post
Share on other sites

Soit, tu fais ce que tu veux ;) Mais si ça peut t'éclairer, voilà un petit lien vers une vidéo pour découvrir les + de BBComposer.

Par rapport à la démonstration chez le client, hier même, j'ai fais une démo sur le PC du client. BBComposer + Firefox installé en quelques minutes. Ca m'a donné le temps de discuter un peu sur les logiciels libres et leur avantage.

Edited by froidure_nicolas

Share this post


Link to post
Share on other sites
Ton jugement me parait sévère, s'il est intégré dans des CMS de la qualité de Drupal c'est qu'il ne doit si mal fonctionner. Peux-tu nous donner plus de détails sur les problèmes que tu as rencontré ?

J'ai testé la version 0.2.2 RC2.

  • On ne peut pas allé à la ligne (amoins que je n'ai pas trouvé, ca à la limite ...),
  • Je me suis plusieurs fois retrouvé le pointeur dans la zone bleu sans pouvoir créer de zone balisé (p, h1, etc ...), je cliquais sur les boutons et rien ne se passe. Dans ce cas il n'y a rien à faire, c'est bugué, enfin si on peut supprimer les balises jusqu'à être à nouveau dans un block "p" et encore ce n’est pas garanti,
  • Après avoir utilisé une balise Blockquote (ou Preformatted) il faut trouver un subterfuge pour en sortir (flèche vers le bas fonctionne rarement). Et ca c'est une prise de tête formidable,
  • Il faut sans arrêt repositionner le pointeur (Ca à la limite ...),
  • De façon général il arrive trop souvent que lorsque l'on clique sur une balise qu'il ne se passe rien et sans raison.

J'ai trouvé tout ça sur 5 minutes d'utilisation. En apparence c'est de la balle, en réalité c'est une prise de tête permanente. Et non ce n'est pas sévère. :thumbsdown:

Edited by Spark

Share this post


Link to post
Share on other sites

Tu utilises quel navigateur ? Avec ff 2 / IE6 et la demo en ligne je ne constate pas ces problèmes. Peut être du à ton installation ?

On ne peut pas allé à la ligne (amoins que je n'ai pas trouvé, ca à la limite ...),

==> enter : création d'un nouveau paragraphe

==> shift + enter : saut de ligne

ça marche très bien chez moi

Après avoir utilisé une balise Blockquote (ou Preformatted) il faut trouver un subterfuge pour en sortir

==> le plus simple : tu tape ton texte ensuite [enter] et ensuite tu appliques blockquote ou preformated mais il existe d'autres moyens

Je me suis plusieurs fois retrouvé le pointeur dans la zone bleu sans pouvoir créer de zone balisé

==> ça m'est arrivé 1 ou 2 fois mais il m'a suffit de commencer à taper du texte et il n'y a pas de soucis

Il faut sans arrêt repositionner le pointeur (Ca à la limite ...),

De façon général il arrive trop souvent que lorsque l'on clique sur une balise qu'il ne se passe rien et sans raison.

==>Je n'ai pas compris

Bref je trouve qu'il fonctionne plutôt bien.

Share this post


Link to post
Share on other sites

J'utilise Firefox 2

Après avoir utilisé une balise Blockquote (ou Preformatted) il faut trouver un subterfuge pour en sortir

==> le plus simple : tu tape ton texte ensuite [enter] et ensuite tu appliques blockquote ou preformated mais il existe d'autres moyens

==> Subterfuge, ce n'est pas parce qu'il y a une solution à chaque problème que sont utilisation en deviens agréable.

De façon général il arrive trop souvent que lorsque l'on clique sur une balise qu'il ne se passe rien et sans raison.

==>Je n'ai pas compris

==> Exemple : Je suis dans un balise "p" je veux la faire devenir h3, il ne se passe rien. C'est un exemple très spécifique.

Mon but n'est pas de descendre leur travail. Je suis sur qu'avec encore un peu plus de maturité il sera meilleur encore. Mais pour l'instent une utilisation au quotidien n'est pas envisageable.

Là je regarde TinyMCE et je cherche comment le mettre en Français et comment l'intégrer dans mon site. Ca risque d'être compliqué !

Edited by Spark

Share this post


Link to post
Share on other sites
Mon but n'est pas de descendre leur travail. Je suis sur qu'avec encore un peu plus de maturité il sera meilleur encore. Mais pour l'instent une utilisation au quotidien n'est pas envisageable.

==> on est bien d'accord et c'est pour cela que j'essaie de bien cerner les problèmes que tu rencontres pour les faire remonter ;)

==> Subterfuge, ce n'est pas parce qu'il y a une solution à chaque problème que sont utilisation en deviens agréable.

Ce n'est pas vraiment un subterfuge je pense que c'est une manipulation qui est à connaitre avec quasiment tous les WYSIWYG. On tape son texte au km et ensuite on applique les styles et/ou les balises de structuration (H1, blockquote...). Une fois que l'on applique cette simple règle on s'évite de s'arracher les cheveux.

Ne t'attends pas avec tiny_mce au wysiwyg ultime, il est très bien (je l'utilise au quoditien) mais lui aussi a un comportement capricieux. La configuration via tiny_mce_config.js est essentielle pour que celui ci génère un code convenable.

Bonne continuation !

Share this post


Link to post
Share on other sites

J'utilise de mon côté OpenWYSIWYG ...

J'ai déjà testé FCKEditor, qui est certe le plus complet, mais d'une lourdeur (surtout sur firefox !) qui empêche la page de se charger "fluidement".

WymEditor est d'apparence superbe, mais je le trouve quelque peu compliqué à modifier à sa convenance (avis perso !)...

Bref, mon choix s'est, depuis un moment, porté sur OpenWYSIWYG.

Tu peux le tester ici : http://www.openwebware.com/products/openwysiwyg/

Fanou

Share this post


Link to post
Share on other sites
La configuration via tiny_mce_config.js est essentielle pour que celui ci génère un code convenable.

Je n'ai pas trouvé ce fichier, je suppose que c'est l'équivalent des des fichiers example_***.js.

Merci pour tout.

Il a l'air bien. Je le testerais aussi après m'être acharné un peu plus avec TinyMce, comme je l'ai déjà mis en Français ... (attention les fichiers ne sont pas à jour, et 1 est mal codé).

Merci.

Edited by Spark

Share this post


Link to post
Share on other sites

Je viens de tester Openwysiwyg, niveau validation xHTML strict ça va être une catastrophe. Le code généré est fonctionnel mais deviens vite bordélique et invalide. :thumbsdown: Je pense que seul Wymeditor est capable de générer un code propre.

Pour la récupération du code généré dont je parlais plus haut ça devrais être bon, je faisais une erreur, comme d'hab quoi :P

Edited by Spark

Share this post


Link to post
Share on other sites

Salut !

Je suis ce débat houleux avec attention, et j'aimerai juste dire quelques mots, notamment sur les éditeurs WYSIWYM dont, à ma connaissance, seuls BBComposer et WYMEditor peuvent se targuer d'en faire parti.

Pour répondre à Spark, bien-sûr que les éditeurs WYSIWYG sont moins "user-friendly" que les autres éditeurs tels que FCKEditor. Mais la question qu'il faut se poser, ce n'est pas comment, mais pourquoi !

Avec FCKEditor, tu vas à la ligne en tapant entrée, avec le BBcomposer, tu dois faire Shift + Entrée ou cliquer sur le bouton à la ligne. Certes, on est pas habitué à cela, mais je ne changerai pas cela pour deux raisons :

  • depuis sa création, forcément, j'utilise BBComposer. Je peux te dire qu'on s'y habitue extrêmement vite.
  • Cela évite un des gros travers des éditeurs WYSIWYG, la maladie des "br partout". En effet, le web est spécial, un document HTML n'est "heureusement" pas un document Word. Il est normal que sa modification soit différente.

Ainsi, dans un éditeur WYSIWYM, tu raisonnes sémantiquement. Ton texte n'est pas une suite de lignes les unes en dessous des autres. C'est un ensemble de blocs contenant des lignes de texte. Ces blocs ont chacun une valeur sémantique et le texte qu'ils contiennent ont eux aussi une valeur sémantique qui est déterminée par des éléments dits en ligne.

Certes, utiliser le BBComposer nécessite de la bonne volonté et, assurément, un apprentissage. Mais comme je le dit, c'est le prix de la sémantique, de la conformité et d'un bon référencement, car, il ne faut pas se leurrer, Google préfère un contenu organisé et sans erreur.

Bref, les mentalités changent lentement, mais ne vous accrochez pas à FCKEditor qui est une vision dépassée du WYSIWYG.

Par exemple, les fonctions de sortie du BBComposer, celles qui font que je peux sortir du BBCode, du XBBCode, du Mediawiki, du Spip ou encore des codes Skyblog n'ont pu être crées que parce que j'ai la maîtrise du contenu produit par le BBComposer.

Essayez de les adapter à FCKEditor, ça sera une autre paire de manche...

Share this post


Link to post
Share on other sites

Je ne peux qu'adhérer à tes propos nicolas ;)

Au final Spark devrait sans doute opter pour BBComposer pour 2 raisons :

- il s'installe très simplement (1 clic) (WYM editor ou Tiny mce nécessite de mettre un peu le nez dans le code)

- il génère du code propre

Share this post


Link to post
Share on other sites

Je ne trouve pas le "débat" houleux, mais au contraire très enrichissant. Beaucoup de Hubien on apporté leurs avis et je les en remercie. Souvenez vous du 1er post ou je ne connaissais aucun de ces éditeurs.

Je suis très critique pour essayé de trouver ce qu'il y a de mieux, c'est pourquoi je teste tout que l'on me propose. Je me doute bien que d'une manière ou d'une autre je devrai faire des concessions. Je testerais également BBComposer, mais comme je vous l'ai dis j'aimerais éviter d'imposer Firefox et un plugin aux autres personnes (et il y en aura) qui écriront des tutos. Mais si c'est le prix pour du code propre, je m'y plierais.

Je vous ferais par de mon choix final.

Encore merci.

Share this post


Link to post
Share on other sites

En réalité, tu n'es pas obligé d'imposer Firefox, il existe aussi des éditeurs XHTML utilisable avec IE (comme XStandards) ou même de façon indépendante. C'est ça le plus d'ailleurs, c'est le choix de l'éditeur.

Mais bon, je n'exclue pas de faire un BBComposer pour Internet Explorer. seulement, c'est pas pour tout de suite.

Share this post


Link to post
Share on other sites
- il s'installe très simplement (1 clic) (WYM editor ou Tiny mce nécessite de mettre un peu le nez dans le code)

Oui, et alors, ils sont tous les deux très faciles à configurer (bien sûr il y a une plétore de paramètres mais nombreux sont ceux qui ne sont pas forcement utile pour une utilisation simple), une fois que c'est fait dans le site, c'est fait une fois pour toute.

- il génère du code propre

TinyMCE Correctement configuré et correctement utilisé aussi, tout comme WYM editor

Je reste à mon opinion de base : Rien ne doit être installé sur l'ordinateur du client, cela entraine trop de contraintes maintenance sur le poste du client (cf mon post précédent)

Share this post


Link to post
Share on other sites
Soit, tu fais ce que tu veux ;) Mais si ça peut t'éclairer, voilà un petit lien vers une vidéo pour découvrir les + de BBComposer.

Par rapport à la démonstration chez le client, hier même, j'ai fais une démo sur le PC du client. BBComposer + Firefox installé en quelques minutes. Ca m'a donné le temps de discuter un peu sur les logiciels libres et leur avantage.

1) ton client a bien voulu que tu installes.

2) ton client est peut-être capable de se debrouiller seul après.

C'est un tres bon outil si tu as la cible adapté. Mais quand tu as en face de toi des gens qui ont peut de tester un clic-droit, tu peux toujours essayer de leur faire installer un logiciel eux-meme...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...