bbcode ~ saisir du HTML avec un éditeur wysiwyg

Nous avons souvent besoin de saisir du code HTML avec un éditeur WYSIWYG comme TinyMCE ou JCE. Vous me direz qu'il suffit de passer en mode code, mais cela présente quelques désagréments :

  • l'éditeur peut supprimer votre saisie sans avertissement
  • les balises avec leurs attributs ne sont pas visibles en mode wysiwyg
  • confusion entre votre code et le code de l'éditeur

ico-crayon A partir de la version 1.8, plusieurs actions (csv2table, chart, ...) utilisent cette méthode pour sécuriser la saisie de leurs arguments.

🆙 bbcode : Saisir du code HTML avec un éditeur WYSIWYG

Cliquer pour lire la documentation

syntax 1 {up bbcode=content}
syntax 2 {up bbcode} content {/up bbcode}
@author: LOMART @version: UP-1.8 @license: GNU/GPLv3 @tags: Editor
  • bbcode: contenu au format BBCODE
  • tags: balises à traiter. vide: par défaut, liste (a,b,p) ou balise en plus de défaut (+a,b,p)
  • css-head (base-css): style ajouté dans le HEAD de la page

La méthode simple

J'ai nommé cette action bbcode car elle ressemble au bbcode que l'on trouve sur les forums.
Elle diffère du fait que les balises utilisées sont celles du HTML avec des [] à la place des <>.

Mettons cela en pratique !

Un texte en gras ou en rouge

Un texte en {up bbcode=[b]gras[/b] ou en [b style="color:red"]rouge[/b]}

La méthode pour un bloc de texte

Comme ci-dessous, il est possible de saisir le contenu entre les shortcodes ouvrant et fermant.

La saisie en mode wysiwyg

{up bbcode} Un texte en
[b] gras [/b]
ou en
[b style="color:red"] rouge [/b]
{/up bbcode}

La saisie en mode code

<p>{up bbcode} Un texte en
<br> [b]gras[/b]
<br>ou en</p>
<p> [b style="color:red"]rouge[/b]</p>
{/up bbcode}

Le résultat

Un texte en  gras ou en  rouge

Toutes les balises HTML ajoutées par l'éditeur WYSIWYG sont supprimées. Cela vous assure que seul votre code sera pris en compte !

Les cas particuliers

Par défaut, les balises HTML usuelles sont définies : br,p,h3,h4,h5,h6,div,span,b,i,u,img,small,sup,sub,quote,ul,ol,li,code,tt

L'option tags vous permet de substituer la votre ou de compléter la liste existante en ajouter le signe + devant. Indiquer uniquement les tags séparés par des virgules.

Remplacer les <> par des [] 
{up bbcode | tags=+kbd}[b]Remplacer les [kbd]<>[/kbd] par des [kbd]\[\][/kbd][/b]{/up bbcode}

Cet exemple montre également comment saisir des caractères crochets. Il suffit de les échapper avec le caractère antislash.

Pour info, cette page utilise 9 action(s) :
icon (1) upactionslist (1) bbcode (5) flexauto (1) jcontent-info (1)
Détails