[plugin] plxToolbar

Stéphane

plxToolbar la barre d'outils toute simple pour ajouter le code html dans les zones de saisie des articles

Téléchargement ici

Historique

## Version 1.5.1 (30/01/2019) ##
FIX: pas d'affichage des icônes des custom buttons

## Version 1.5 (29/01/2019) ##
FIX: pas d'affichage des icones de la barre d'outils

## Version 1.4.1 (29/09/2016) ##
[+] Lien relatif des images au lieu du lien absolu en http://
BUG #1: mauvais libellé de la balise HR

## Version 1.4 (10/02/2016) ##
Compatibilité PluXml 5.5
+ Utilisation du gestionnaire de médias de PluXml
- Suppression des images .png, remplacées par une fonte
- Suppresion des caractères de commentaires dans les fichiers .js
+ Optimisation du code
+ Refonte de l'aspect visuel de la barre d'outil
+ Bouton Youtube: code compatible html5 (suppression code object flash)

## Version 1.3 (15/07/2015) ##
[+] Compatibilité PluXml 5.4

## Version 1.2 (08/09/2011) ##

mr-toc

j'arrive pas à importer certains type de fichier dont .webm, .vtt etc.

Andrea

Merci pour la mise-a-jour 5.4

Les images des titres H2 H3 etc sont etrangement affiches, ils ne sont pas alignes verticalement (c'est comme un escalier la...) et celui de Youtube pas du tout

Suricat

Bonjour,

J'ai modifié plxToolbar pour permettre de choisir la disposition des images lors de leur insertion, ajouter optionnellement un caption sous l'image et pour préciser la largeur et la hauteur de l'image dans le code html généré.

Pour ceux que ça intéresse, voici le code à insérer dans plxToolbar.js :

[== JavaScript ==]
function getRadioValue(name)
{
    for (var i = 0; i < document.getElementsByName(name).length; i++)
    {
        if (document.getElementsByName(name)[i].checked)
        {
            return document.getElementsByName(name)[i].value;
        }
    }
}

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

function insertImgFormated(textarea, url){   
    // Charge l'image pour récupérer sa largeur et sa hauteur dans onload...
    var img = new Image();
    img.onload = function(){
        var UrlImg = url;
        var UrlOrig = null;
        var index;
        var sImgNue;
        var sImgPos;

        // prend l'url relative
        index = UrlImg.indexOf("data/");
        if(index!=-1) UrlImg = UrlImg.substr(index);
            
        // récupération de l'image d'origine si l'url sélectionnée est une miniature
        index = UrlImg.indexOf(".tb.");
        if(index!=-1) UrlOrig = UrlImg.substr(0, index)+UrlImg.substr(index+3);

        // contruction du HTML interne de la fenêtre permettant de renseigner un titre
        // et de sélectionner une position pour l'affichage de l'image
        // Tout le code d'insertion de l'image formatée est dans le onClick du bouton OK
        sImgNue='<img src="'+UrlImg+'" width="'+this.width+'px" height="'+this.height+'px"'
               +' alt="\'+tt+\'" title="\'+tt+\'" />';

        sImgPos = sImgNue;
        if(UrlOrig!=null)
            {
              sImgPos = '<a rel="lightbox" href="'+UrlOrig+'">' + sImgPos + '</a>';
            }

        sImgPos = '<figure class=\"figure \'+ClassAlign+\'\">' + sImgPos
                + '\'+((IsCaption==1) ? \'<figcaption class=\"figcaption\">\'+tt+\'</figcaption>\' : \'\')+\'' 
                + '</figure>';

        var iftxt = '<div style="padding-bottom:6px">Titre : <input type="text" id="BBTBTitle" style="width:300px" /></div>'
                 +'<div style="padding-bottom:6px">Sans caption : '
                 +'<input type="radio" name="BBTBdispo" id="DLeft" value="DLeft" checked /> <label style="display:inline" for="DLeft">Gauche</label>&nbsp;&nbsp;&nbsp;&nbsp;'
                 +'<input type="radio" name="BBTBdispo" id="DCenter" value="DCenter" /> <label style="display:inline" for="DCenter">Centré</label>&nbsp;&nbsp;&nbsp;&nbsp;'
                 +'<input type="radio" name="BBTBdispo" id="DRight" value="DRight" /> <label style="display:inline" for="DRight">Droite</label></div>'
                 +'<div style="padding-bottom:8px">Avec caption : '
                 +'<input type="radio" name="BBTBdispo" id="DLeftCaption" value="DLeftCaption" /> <label style="display:inline" for="DLeftCaption">Gauche</label>&nbsp;&nbsp;&nbsp;&nbsp;'
                 +'<input type="radio" name="BBTBdispo" id="DCenterCaption" value="DCenterCaption" /> <label style="display:inline" for="DCenterCaption">Centré</label>&nbsp;&nbsp;&nbsp;&nbsp;'
                 +'<input type="radio" name="BBTBdispo" id="DRightCaption" value="DRightCaption" /> <label style="display:inline" for="DRightCaption">Droite</label>'
                 +'</div/>'
                 +'<div style="padding-bottom:16px">'
                 +'<input type="radio" name="BBTBdispo" id="DImgNue" value="DImgNue" /> <label style="display:inline" for="DImgNue">Image sans présentation</label>'
                 +'</div/>'
                 +'<button style="margin-right:20px" onClick="document.getElementById(\'IdTitreDispo\').innerHTML=\'\';">Annuler</button>'
                 +'<button style="width:100px" onClick="var imgdispo=getRadioValue(\'BBTBdispo\');'
                 +' var IsCaption=(imgdispo==\'DLeftCaption\' || imgdispo==\'DCenterCaption\' || imgdispo==\'DRightCaption\') ? 1 : 0;'
                 +' var ClassAlign=\'\';'
                 +' if(imgdispo==\'DLeft\' || imgdispo==\'DLeftCaption\') ClassAlign=\'il\'; else'
                 +' if(imgdispo==\'DCenter\' || imgdispo==\'DCenterCaption\') ClassAlign=\'ic\'; else'
                 +' if(imgdispo==\'DRight\' || imgdispo==\'DRightCaption\') ClassAlign=\'ir\';'
                 +' var tt=document.getElementById(\'BBTBTitle\').value;'
                 +' var ss=(imgdispo==\'DImgNue\') ? \''+escapeHtml(sImgNue)+'\' : \''+escapeHtml(sImgPos)+'\';'
                 +' plxToolbar.insert(\''+textarea+'\', ss,\'\'); document.getElementById(\'IdTitreDispo\').innerHTML=\'\';">OK</button>'
                 ;

        // création de la fenêtre
        var div = document.getElementById("IdTitreDispo");
        var height = 300;
        var top = (document.body.clientHeight-height)/2-400+document.body.scrollTop;
        if(!document.contains(div))
            {
              div = document.createElement('div');
              div.setAttribute("id", "IdTitreDispo");
              document.body.appendChild(div);
            }
        iftxt='<div style="z-index:1000;position:absolute;background-color:#FFF;border:solid 6px #555;text-align:center;padding-top:70px'
             +';left:400px;top:'+top+'px;width:500px;height:'+height+'px">'+iftxt+'</div>';
        div.innerHTML = iftxt;
        document.getElementById("BBTBTitle").focus();
    };
    img.src = url;
}

Toujours dans plxToolbar.js, voici le code à ajouter dans function _plxToolbar(), juste après
"this.insert = function(textarea, tag_open, tag_close, qst, mess) {" :

[== JavaScript ==]
if(tag_open=="<img>")
    {
       insertImgFormated(textarea, tag_close);
       return;
    }

Suivre ce lien pour voir la fenêtre qui s'affiche alors lorsque l'on souhaite insérer une image :
https://drive.google.com/open?id=0B4HzCbYx42HHZHdoR3laQTQyQjQ


Cela permet de générer et insérer du HTML pour un positionnement de l'image avec ou sans caption, du style suivant :

[== HTML ==]
<figure class="figure ir"><a rel="lightbox" href="data/medias/mon-image.jpg"><img src="data/medias/mon-image.tb.jpg" width="160px" height="105px" alt="Ma description de l'image positionnée à droite" title="Ma description de l'image positionnée à droite" /></a><figcaption class="figcaption">Ma description de l'image positionnée à droite</figcaption></figure>

Après, il reste à mettre le code css pour positionner les images selon la class :
gauche : il, centré : ic, à droite : ir

niqnutn

Il y a une petite coquille dans le libellé de la barre horizontale (<hr>) qui se trouve à coté de lien. ils portent tous les deux le label "lien"
plxToolbar - Version 1.4 (10/02/2016)

Stéphane

niqnutn a écrit:

Il y a une petite coquille dans le libellé de la barre horizontale (<hr>) qui se trouve à coté de lien. ils portent tous les deux le label "lien"
plxToolbar - Version 1.4 (10/02/2016)

Merci.
Pris en compte: https://github.com/Pluxopolis/plxtoolbar/issues/1

bay

Bonjour , il me semble que dans la version 1.4 , il n'est plus possible d'insérer une miniature d'une image ?

niqnutn

pourquoi utiliser le chemin absolu pour insérer des images ?
dans la version précédente les images étaient insérées avec leurs liens relatifs.

je pense qu'il faut privilégier le chemin relatif.


plxToolbar reste le meilleur éditeur, simple et efficace.

cfdev

Idem @Stéphane peux-tu faire cette petite modif pour les liens ?

cfdev

Oui bien si tu peux m'indiquer environ où il faut que je cherche à modifier (ce serait sympa )
merci d'avance !

Stéphane

## Version 1.4.1 (29/09/2016) ##
[+] Lien relatif des images au lieu du lien absolu en http://
BUG #1: mauvais libellé de la balise HR

https://github.com/Pluxopolis/plxtoolbar/releases

cfdev

Merci @Stéphane comme toujours nickel !!!

Andrea

Andrea a écrit:

Merci pour la mise-a-jour 5.4

Les images des titres H2 H3 etc sont etrangement affiches, ils ne sont pas alignes verticalement (c'est comme un escalier la...) et celui de Youtube pas du tout

Ce n'est plus le cas avec cette nouvelle collection d'icones en noir&blanc (que je trouve d'ailleurs plus belle plus sobre en fait...)

PS: c'est dommage que cela ne soit pas inclus dans MyPluginDownloader, non?

Stéphane

## Version 1.5 (29/01/2019) ##
FIX: pas d'affichage des icones de la barre d'outils

Stéphane

## Version 1.5.1 (30/01/2019) ##
FIX: pas d'affichage des icônes des custom buttons