BBComposer — l'éditeur HTML à consommer sur place ou à emporter

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

BBComposer — l'éditeur HTML à consommer sur place ou à emporter

Initialement développé pour les besoins internes de la société ElitWork, BBComposer est un éditeur de texte qui produit du code HTML (mais aussi du Wiki, BBCodes et XBBCodes) dans un environnement WYSIWYG. Nicolas et Mathieu Froidure ont prêté une attention particulière au code généré, avec la sémantique des balises comme fil directeur. BBComposer est une extension Firefox, ce qui le distingue des autres éditeurs HTML sur le marché comme TinyMCE ou CKEditor. Il est donc possible d’utiliser cet éditeur HTML dans votre CMS préféré sans ajouter de plugin.

BBComposer et WordPress

Dans WordPress, par exemple, il suffit de passer l’éditeur de texte en mode HTML (au lieu du mode Visuel) et de cliquer avec le bouton droit de la souris pour sélectionner BBComposer et choisir le langage de votre choix (XHTML 1.0, par exemple). Il ne reste plus qu’à saisir votre texte et à l’enrichir avec les balises appropriées.

Une fois le langage sélectionné, la zone d’édition de BBComposer apparait. Comme vous pouvez le constater les options sont nombreuses.

La fenêtre d'édition de BBComposer et la barre latérale pour utiliser des styles CSS en ligne. Cliquez pour agrandir l'image.

Des « super blocs » et des listes de définition

La plupart des éditeurs présents sur le marché se contentent de créer des balises de manière linéaire. BBComposer se distingue encore en permettant la création de super blocs avec les balises blockquote et div.

A propos de blockquote, la plupart des éditeurs ont oublié qu’une deuxième balise de type block était nécessaire comme :

<blockquote>
    <p>La citation</p>
</blockquote>
Parmi les options de formatage disponibles on notera — outre les traditionnels titres sur 6 niveaux ou les listes ordonnées ou non ordonnées — les listes de définition qui justifieraient presque l’adoption de BBComposer, tant il est vrai qu’elle sont sous-utilisées, certainement en raison de leur manque de prise en charge par les éditeurs WYSIWYG !

Des styles pour avoir la classe

Grosse cerise sur le gâteau, il est possible d’ajouter une ou plusieurs classes CSS sur chaque élément, y compris sur un super bloc div. Ceci peut être très intéressant lors de la rédaction d’articles de type magazine pour obtenir une mise en forme différente selon le sujet sans passer systématiquement par le mode HTML pour saisir les balises.

Je pense notamment à la possibilité d’ajouter une classe wrapper ou clearfix à un super bloc pour rétablir le flux après avoir mis des éléments en float: left ou float: right à supposer que vous ayez déjà une classe .float-left et .float-right à votre disposition dans votre fichier style.css.

Des styles en ligne à profusion

Avantage ou inconvénient, une barre latérale propose une foultitude d’option de formatage qui se traduisent par l’insertion de styles en ligne comme <p style="text-align: center;">blabla</p>.

Petite digression…

Même si je trouve que les styles en ligne, c’est pas bien dans le cadre du développement d’un site web (au niveau de l’architecture des pages), je trouve que BBComposer offre une solution simple pour permettre aux clients qui le souhaitent d’enrichir leurs textes. Bien sûr, c’est la porte ouverte à toutes les fenêtres et le risque est grand de voir une typo différente par ligne et 4 couleurs dans le même paragraphe… ;)

… Revenons à nos moutons !

Outre le formatage du texte, la palette des styles propose de définir ou modifier les propriétés margin et padding ainsi que l’arrière-plan, la position absolute ou encore float avec les options clear nécessaires pour rétablir le flux après les éléments flottants.

Documentation

Un des point-clés d’une application se trouve dans sa documentation. A cet égard, BBComposer nous gâte :

Une application extensible

BBComposer est extensible. Parmi les extensions disponibles, je vous encourage à tester l’extracteur sémantique de mots-clés KGen :

KGen est un générateur de mots-clés qui permet d’analyser les mots contenus dans une page et de déterminer ceux qui, pour les moteurs de recherche, auront le plus d’importance.

Voici une vidéo de présentation.

Pour Conclure

Je suis loin d’avoir fait le tour de BBComposer et sa richesse demande un peu d’adaptation, mais le confort procuré par les super blocs et la possibilité d’attribuer une classe à n’importe quel élément valent le détour.

La nature de BBComposer lui permettra de trouver sa place dans votre boite à outil puisqu’il ne vous obligera pas à supprimer votre éditeur préféré. Vous pourrez même le proposer à vos lecteurs qui pourront ainsi enrichir leurs commentaires (à supposer que votre CMS autorise l’utilisation des balises HTML ou BBCode dans cette zone).

Les utilisateurs de WordPress pourront sans peine l’utiliser dans la zone d’édition des billets pour palier les manques de l’éditeur TinyMCE installé par défaut, notamment l’absence de la balise code, bien pratique lorsqu’on a l’occasion de parler des langages du web !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



9 commentaires pour “BBComposer — l'éditeur HTML à consommer sur place ou à emporter”

  1. […] This post was mentioned on Twitter by Guy Labbé, fred lauzon, Fabrice Gangler, Nicolas Froidure, Bruno Bichet and others. Bruno Bichet said: BBComposer — l’éditeur HTML à consommer sur place ou à emporter http://j.mp/7bgxN4 […]

  2. fran6t dit :

    Je viens de l’essayer rapidement avec l’ensemble ubuntu+firefox+dotclear cela fonctionne impeccable, il faut passer son billet en mode xhtml puis en mode source alors le clique du bouton droit permet d’éditer son billet avec bbcomposer. Par contre je n’ai pas trouver comment mettre un mot en rouge il me met a chaque fois l’ensemble de la phrase ?

  3. Bonjour,

    Je profite du week-end pour te remercier pour ce petit billet sur BBComposer. C’est une belle récompense pour moi que mon travail sorte des sentiers de ma seule entreprise.

    En ce qui concerne les styles en ligne, j’ai bcp hésité, mais force est de constater que les clients réclament la possibilité de changer l’alignement et la couleur des textes…

    J’ai quelques sites avec du texte qui clignote et des couleurs un peu en dehors de la charte graphique. Pour moi, c’est tjrs un peu ennuyeux, mais je dois avouer que pour certains sites, ça donne une âme, un aspect humain qui répond je pense à un certain besoin d’authenticité.

    Sinon, pour répondre à fran6t, les styles sont appliqués à des éléments dans BBComposer là où un autre éditeur WYSIWYG créerai un span pour appliquer la couleur à la sélection. Pour reproduire ce comportement, il faut utiliser le bouton « Marqueur stylistique » et ajouter les styles sur l’élément ensuite. Je le conseille pas car mieux vaut privilégier la sémantique du document plutôt que de faire des mises en formes à coup de span.

    Voilà, n’hésitez pas à utiliser la dernière version de développement pour m’aider à détecter les bugs et à l’améliorer voire participer à sa fabrication, tout est ici. Les prochaines évolutions seront sûrement l’ajout de boutons dans la barre des styles (padding margin etc..), la correction de bugs et quelques autres plus sympa. Je pense également à plus long terme à une version web et au support d’HTML5. Vous pouvez proposer vos améliorations, soyez assurés que j’en tiendrai compte.

  4. ben dit :

    @fran6t : J’ai pas testé bbcomp mais en style en ligne ça donne < span style= »color:red » > ton mot < /span >, mais sinon si c’est pour marquer un mot, c’est un peu la jungle mais sémantiquement ça serait < strong > et dans ton css : strong{color:red;}

  5. […] éditeurs comme TinyMCE ou FCKEditor, bien plus conviviaux. Et si vous en profitiez pour utiliser BBComposer […]

  6. […] Lire BBComposer : un éditeur html à consommer sur place ou à emporter » […]

  7. […] BBComposer — l’éditeur HTML à consommer sur place ou à emporter Tags: consommer-sur, html, […]

  8. […] BBComposer — l’éditeur HTML à consommer sur place ou à emporter Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? […]

  9. […] avec des balises DIV et l’application de classes CSS sur les éléments. Revue complète dans BBComposer — l’éditeur HTML à consommer sur place ou à emporter. […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site