frendeitpt

html ~ saisir du html en mode wysiwyg

saisir du code HTML dans un article en mode Wysiwyg (sans passer en mode code)

🆙 html : permet de créer une entité HTML (balise) avec classe(s), style et attribut sans passer en mode code

Cliquer pour lire la documentation

exemples :
{up html=div | class=foo | id=x123}contenu{/up html}
--> < div id="x123" class="foo">contenu< /div>
{up html=img | class=foo | src=images/img.jpg}
--> < img class="foo" src="/images/img.jpg" >
note: toutes les options sont considérées comme des attributs de la balise
v2.2 : possibilité saisie rapide {up html=h1.foo.xx} équivaut à {up html=h1 | class=foo xx}
version UP-1.0 author LOMART 2017-08 license GNU/GPLv3 tags html
  • html = div: balise html
  • class: classe(s)
  • style: style inline
  • xxx = yyy: couple attribut-valeur. ex: title=le titre, href=//google.fr

    Simple et pratique

    J'ai créé cette action pour saisir du code HTML dans un article en mode Wysiwyg (sans passer en mode code)

    Un exemple 'simpliste' pour comprendre le principe

    {up html | style=color:red}
    un texte en rouge
    {/up html}
    

    va donner le résultat ci-dessous

    un texte en rouge

    Il correspond au code :

    <div id="up-35-2" style="color:red">
      un texte en rouge
    </div>

    Un autre exemple juste pour le fun: insérer une image

    {up html=img | src=images/photos/Perroquets-rouges-en-Equateur-mini.jpg | alt=texte alternatif | title=2 beaux perroquets }
    
    texte alternatif

    Insérer une vidéo dailymotion

    Le résultat
    Le shortcode
    {up html=iframe
     | src=https://www.dailymotion.com/embed/video/x78gqbi?autoPlay=1
     | allowfullscreen
     | allow=autoplay
     | width=480
     | height=270
     | frameborder=0}
    

    Il suffit de récupérer le code de la vidéo, celui à la fin de l'URL du site dailymotion, et de le remplacer dans le shortcode ci-dessus. Vous pouvez ajuster les options à votre convenance.

    Encore un autre

    Pratique pour éviter de se battre avec votre éditeur qui efface les saisies qu'il n'aime pas !
    Cela vous assure aussi que si un autre rédacteur n'ayant pas les droits modifie votre article, l'iframe restera

    Un exemple, suite à une demande sur le forum joomla.fr

    Le code est :

    <div style="text-align:center" class="bloc">
    {up html=iframe 
    | src=https://www.google.com/maps/embed?pb=!1m0!4v1510843613661!6m8!1m7!1sCAoSLEFGMV FpcE9LekZ1NEFXcEFBWkpJM3NwYk5BSk5GV25qSFBNbGhTYkF4 eU5E!2m2!1d50.518660704295336!2d5.222107117821095! 3f328.2343295257333!4f-5.481540079137304!5f0.7820865974627469 
    |width=600 
    | height=450 
    | frameborder=0 
    | style=border:0 
    | allowfullscreen}
    impossible d'afficher le contenu
    {/up html}
    </div>

    Le shortcode de fermeture est optionnel. Il permet d'afficher un contenu alternatif si l'iframe ne peut être affiché.

    UP ferme toujours les tags HTML qui l'exige, qu'un contenu ou non soit indiqué.

    Une utilisation astucieuse proposée par Pascal Leconte sur forum.fr

    Le besoin : insérer une timeline Twitter. Le code fourni est composé de l'appel en HTML et d'un script JS.

    La solution avec UP :

    • Un premier shortcode pour le lien HTML saisi directement en wysiwyg
    {up html=a | class=twitter-timeline | href=https://twitter.com/search?q=XXXXXX | data-widget-id=XXXXXX}Tweets sur XXXXXX {/up html}
    • Un deuxième shortcode pour le script
    {up html=script}
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');
    {/up html}

    L'astuce est l'appel du script. De cette manière, vous êtes sûr que votre éditeur wysiwyg ne l'effacera pas

    Un bouton pour rafraichir la page

    {up html=button | onclick=window.location.reload(false) | class=btn btn-primary}Actualiser la page{/up html}

    false conserve la position actuelle, true revient au début

    Version 2.2 : saisie rapide balise et classe(s)

    Pour faciliter la saisie et mettre en évidence une spécificité d'un code HTML, il est possible de saisir la balise HTML et ses classes comme argument principal. La syntaxe est identique à celle d'un sélecteur en CSS.

    Un titre rouge sur fond jaune

    {up html=h2.bg-jaune.t-rouge}Un titre rouge sur fond jaune{/up html}

    Un bloc de texte

    {up html=p.bd-rouge.bg-grisPale.p2}Un bloc de texte{/up html}