J'ai écrit cette action pour éviter à un rédacteur de passer en mode code pour ajouter des classes à une image ajoutée avec TinyMCE.
{up attr | class=bg-yellow}< p>texte< /p>{/up attr}syntaxe
{up attr | class=bg-yellow | tag=img}< img src="/image.jpg" >
{/up attr}- attr: classe(s) et/ou style
- tag: balise recherchée, sinon la première
Toutes les autres clés sont considérées comme des attributs
- xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr
options secondaires
- id: identifiant
- class: classe(s) pour bloc interne
- style: style inline pour bloc interne
- css-head (base-css): style ajouté dans le HEAD de la page
Un exemple simple
Un texte
{up attr | class=p3 tc b bg-lightYellow bd-rouge}
Un texte
{/up attr}Ce shortcode ajoute des attributs au bloc contenant le texte.
Peut importe la balise, c'est le premier bloc du contenu entre les shortcodes
Saisie abrégée
Un texte
{up attr=p3;text-align:center;b;bg-lightYellow;border:4px dotted red}
Un texte
{/up attr}Il est possible d'indiquer des classes et/ou des styles comme argument principal.
Si vous mélangez les deux comme dans notre exemple, n'oubliez pas de séparer tous les éléments par des points virgules.
Avec un jeu d'options
Pour faciliter et uniformiser les saisies, vous pouvez définir des jeux d'options.
Un texte
{up attr=red-dot}
Un texte
{/up attr}Et le jeu d'options
[red-dot]
class = "ombreMax rotate3 p3 tc b bg-lightYellow"
style = "border:8px dotted red"Plus d'infos : 🆙 créer un jeu d'options (prefset)
Un peu plus compliqué
Les attributs sont ajoutés à la première balise du contenu entre les shortcodes. Cela pose problème, si l'éditeur ajoute une balise p ou div à votre insu
Le résultat
La saisie wysiwyg
Dans cet exemple, le saut de ligne après le shortcode insère l'image dans une balise p.
C'est lui qui reçoit le style bordure arrondie rouge.
Le résultat
La saisie wysiwyg
L'ajout d'une option tag avec la balise que l'on veut cibler suffiit pour que les attributs lui soient affectés
Une autre solution serait de saisir les shortcodes et l'image sur la même ligne. Pas facile de se souvenir de cet impératif !
Il est préférable de créer un jeu d'options qui intègre l'option tag="img", de cette façon le rédacteur doit juste indiquer son nom comme argument principal.
Le résultat
La saisie wysiwyg
Le jeu d'options
[img-red-circle]
class = "mcenter display-block rotate6 bd-rond ombreMax"
style = "border:4px dotted red"
tag = "img"Et les autres attributs
Dans les exemples précédents, nous avons uniquement utilisé les attributs class et style.
Vous pouvez utiliser tous les attributs autorisés par la balise ciblée. Il sera pris en compte par l'action attr
La saisie wysiwyg
Le résultat
Cliquer sur l'image
upactionslist (1) tabslide (1) toc (1) flexauto (6) attr (7) modal (1) jcontent-info (1)