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.
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 :
- Vidéo de présentation,
- Page pour l’installation,
- Manuel de l’utilisateur.
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 !
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 ?
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.
@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;}