PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 15/07/2015 16:45:02

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 181
Site Web

[plugin] plxToolbar

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.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) ##


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#2 15/07/2015 16:57:41

mr-toc
Membre
Inscription : 09/03/2015
Messages : 175

Re : [plugin] plxToolbar

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

Hors ligne

#3 22/08/2015 15:23:55

Andrea
Membre
Inscription : 09/09/2007
Messages : 87

Re : [plugin] plxToolbar

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

Hors ligne

#4 16/05/2016 23:46:38

Suricat
Membre
Inscription : 26/05/2011
Messages : 145

Re : [plugin] plxToolbar

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=0B4HzC … 3laQTQyQjQ


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

Dernière modification par Suricat (17/05/2016 18:22:15)

Hors ligne

#5 30/05/2016 14:55:57

niqnutn
Membre
Inscription : 21/09/2015
Messages : 319
Site Web

Re : [plugin] plxToolbar

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)

Hors ligne

#6 30/05/2016 15:13:30

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 181
Site Web

Re : [plugin] plxToolbar

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#7 03/07/2016 11:12:50

bay
Membre
Inscription : 05/09/2006
Messages : 16
Site Web

Re : [plugin] plxToolbar

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

Hors ligne

#8 27/08/2016 23:22:38

niqnutn
Membre
Inscription : 21/09/2015
Messages : 319
Site Web

Re : [plugin] plxToolbar

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.

Hors ligne

#9 27/09/2016 13:36:04

cfdev
Membre
Lieu : Provence
Inscription : 22/07/2011
Messages : 273
Site Web

Re : [plugin] plxToolbar

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


Vous voulez créer votre plugin pour pluXml? -> spxdatas est fait pour vous !
mcercle - Logiciel de gestion devis/factures/stock !

Hors ligne

#10 28/09/2016 14:32:07

cfdev
Membre
Lieu : Provence
Inscription : 22/07/2011
Messages : 273
Site Web

Re : [plugin] plxToolbar

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


Vous voulez créer votre plugin pour pluXml? -> spxdatas est fait pour vous !
mcercle - Logiciel de gestion devis/factures/stock !

Hors ligne

#11 29/09/2016 09:40:49

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 181
Site Web

Re : [plugin] plxToolbar

## 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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#12 30/09/2016 08:18:57

cfdev
Membre
Lieu : Provence
Inscription : 22/07/2011
Messages : 273
Site Web

Re : [plugin] plxToolbar

Merci @Stéphane comme toujours nickel !!!  big_smile


Vous voulez créer votre plugin pour pluXml? -> spxdatas est fait pour vous !
mcercle - Logiciel de gestion devis/factures/stock !

Hors ligne

#13 06/01/2017 03:47:31

Andrea
Membre
Inscription : 09/09/2007
Messages : 87

Re : [plugin] plxToolbar

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 wink plus sobre en fait...)

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

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés