Cette action permet une saisie rapide et sûre d'attributs (classe et style) pour un bloc inline.
Les éditeurs wysiwyg ont une fâcheuse tendance à répéter les attributs d'un bloc DIV. Il est également très difficile de visualiser la zone concernée si l'attribut n'est pas visuel et/ou non pris en charge par la feuille de style de l'éditeur. Si vous utilisez un éditeur code, c'est aussi l'assurance que rien ne bougera si l'article est modifié ultérieurement dans un éditeur wysiwyg.
L'action SPAN et sa grande sœur DIV permettent de saisir un bloc sans devoir passer en mode code.
{up span=class_and_style}
content{/up span}
- span: classes et style (séparateur : point-virgule)
- id: si indiqué, l'attribut ID est ajouté à la balise SPAN
- class: classe(s) pour bloc (méthode traditionnelle)
- style: style inline pour bloc (méthode traditionnelle)
- css-head (base-css): style ajouté dans le HEAD de la page
La syntaxe est très simple et très permissive comme vous pouvez le voir sur ces exemples :
Une phrase avec {up span=t-rouge b}un mot en gras et rouge{/up span}
Une phrase avec {up span=color:#f00;font-weight:bold}un mot en gras et rouge{/up span}
Une phrase avec {up span=color:#f00;b}un mot en gras et rouge{/up span}
Le fait de pouvoir mélanger classes et styles est une fonctionnalité de base de UP pour toutes les options les spécifiant. La seule contrainte est d'isoler chaque style par des points-virgules.
Si vous préférez, vous pouvez utiliser des options spécialisées
Une phrase avec {up span | style=color:#f00 | class=b}un mot en gras et rouge{/up span}
Il est possible d'imbriquer les actions. Exemple :
Une phrase avec un mot en rouge et gras
Une phrase avec {up span=color:#f00}un mot en rouge et {up span=b}gras{/up span}{/up span}
id et css-head
Ces 2 options ont moins de raisons d'être que pour l'action DIV, mais elles sont fonctionnelles.
Suggestions
Les fonctionnalités proposées par DIV & SPAN peuvent être réalisées avec l'action HTML. Pour reprendre le premier exemple :
Une phrase avec {up html=span | class=color:#f00;b}un mot en gras et rouge{/up html}
Nous avons un résultat identique, même avec notre mélange de classes et styles, c'est juste plus long à saisir !
box (1) tooltip (2) upactionslist (1) flexbox (4) span (6) html (1) jcontent-info (1)