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 !