[plugin] plxToolbar

StéphaneStéphane Member, Former PluXml Project Manager
dans Plugins
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) ##

Consultant PluXml

Ancien responsable et développeur de PluXml (2010 à 2018)

Réponses

  • mr-tocmr-toc Member
    j'arrive pas à importer certains type de fichier dont .webm, .vtt etc.
  • AndreaAndrea Member
    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
  • SuricatSuricat Member
    mai 2016 modifié
    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
  • niqnutnniqnutn Member
    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éphaneStéphane Member, Former PluXml Project Manager
    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

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • baybay Member
    Bonjour , il me semble que dans la version 1.4 , il n'est plus possible d'insérer une miniature d'une image ?
  • niqnutnniqnutn Member
    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.
  • cfdevcfdev Member
    Idem @Stéphane peux-tu faire cette petite modif pour les liens ?
  • cfdevcfdev Member
    Oui bien si tu peux m'indiquer environ où il faut que je cherche à modifier (ce serait sympa :) )
    merci d'avance !
  • StéphaneStéphane Member, Former PluXml Project Manager
    ## 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

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • cfdevcfdev Member
    Merci @Stéphane comme toujours nickel !!! :D
  • AndreaAndrea Member
    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éphaneStéphane Member, Former PluXml Project Manager
    ## Version 1.5 (29/01/2019) ##
    FIX: pas d'affichage des icones de la barre d'outils

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • StéphaneStéphane Member, Former PluXml Project Manager
    ## Version 1.5.1 (30/01/2019) ##
    FIX: pas d'affichage des icônes des custom buttons

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

Connectez-vous ou Inscrivez-vous pour répondre.