span ~ un bloc inline visible en wysiwyg

Html

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.

➠ span : Facilite la saisie d'un bloc inline SPAN avec un éditeur wysiwyg

Cliquer pour lire la documentation

syntaxe {up span=class_and_style}content{/up span}
author LOMART version UP-2.0 license GNU/GPLv3 tags HTML
  • span: classes et style (séparateur : point-virgule)
  • 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 un mot en gras et rouge
    Une phrase avec {up span=t-rouge b}un mot en gras et rouge{/up span}
    Une phrase avec un mot en gras et rouge
    Une phrase avec {up span=color:#f00;font-weight:bold}un mot en gras et rouge{/up span}
    Une phrase avec un mot en gras et rouge
    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 un mot en gras et rouge
    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 un mot en gras et rouge
    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 !