[TOUTES VERSIONS] FA7UP- MyBBCode

Voir le sujet précédent Voir le sujet suivant Aller en bas

[TOUTES VERSIONS] FA7UP- MyBBCode

Astuce le Sam 3 Mar 2018 - 17:16
no_way
avatar
Milouzien

Messageno_way

  • 16px
  • 24px
  • Zoom
Bonjour à tous, afin de suivre ce tuto il vous faut dans l'idéal utiliser fa7up:
http://forum.forumactif.com/t394337-fa7up-installation-simplifiee

Ceci vous donnera accès à un installateur capable de traiter les échappements de caractères, l'ordre et le type de remplacement à votre place, vous pouvez bien sûr faire sans, ce sera juste plus compliqué de gérer le tout pour vous mais vous pouvez passer directement à cette partie.

Ce tuto va vous guider pour créer quelques BBCodes afin de faire l’explication par l'exemple, il s'agira de simplifier et formater la présentation du chemin dans le Panneau d'Administration à suivre lorsqu'on indique à un membre où se rendre pour certains paramètres.

MyBBCode autorise l'administrateur l'injection de code HTML mais ne s'applique qu'aux sujets et aux news, moins de risque donc qu'il empêche l'accès au PA du fait d'un BBCode mal écrit, il faut tout de même faire preuve de prudence car les remplacements effectués se font sur le code HTML du conteneur des messages ainsi remplacer "span" par "div" est une très mauvaise idée, le motif de recherche doit toujours être suffisamment caractérisé afin d'éviter une confusion avec du HTML .




Rendez-vous sur votre page fa7up, sélectionnez MyBBCode puis cliquez sur OK

Pour les 3 premiers BBCodes, nous allons rester dans la simplicité:

  1. Type de remplacement : texte
    Rechercher :
    Code:
    {PA_CSS}
    Remplacer par :
    Code:
    <div class="cheminPA"><img src="//fa7up.fr/svg/rouage.svg" /><span>Panneau d'administration</span><span>Affichage</span><span>Couleurs</span><span>Feuille de style CSS</span></div>
    Votre premier BBCode est paramétré, nous allons passer au suivant en cliquant sur la croix verte
  2. Type de remplacement : texte
    Rechercher :
    Code:
    {PA_HTML}
    Remplacer par :
    Code:
    <div class="cheminPA"><img src="//fa7up.fr/svg/rouage.svg" /><span>Panneau d'administration</span><span>Modules</span><span>Gestion des pages HTML</span></div>
    Votre second BBCode est paramétré, nous allons passer au suivant en cliquant sur la croix verte
  3. Type de remplacement : texte
    Rechercher :
    Code:
    {PA_JS}
    Remplacer par :
    Code:
    <div class="cheminPA"><img src="//fa7up.fr/svg/rouage.svg" /><span>Panneau d'administration</span><span>Modules</span><span>Gestion des codes Javascript</span></div>
    Nous allons passer au dernier BBCode, le plus complexe, cliquez sur la croix verte
  4. Type de remplacement : regexp
    Rechercher :
    Code:
    /\{PA_([^\}]+)\}/g
    Remplacer par :
    Code:
    function(m,m1){return"<div class=\"cheminPA\"><img src=\"//fa7up.fr/svg/rouage.svg\" /><span>Panneau d'administration</span><span>"+m1.split("&gt;").join("</span><span>")+"</span></div>"}

    Ce BBCode est bien plus complexe et bien plus puissant puisqu'il vous permet d'utiliser des expressions régulières en utilisant la notation littérale:
    Code:
    /modèle/indicateurs
    ET d'enclencher une fonction anonyme de formatage, je ne détaillerai pas ceci car c'est assez délicat mais voici quelques liens pour ceux qui souhaiteraient creuser le sujet:
    https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp
    https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace


Cliquez sur le bouton installer et l'installateur construira le script et l'installera sur votre forum.
Ouf ce dernier était velu n'est-ce pas ?




Si vous n'utilisez pas fa7up, créez un nouveau Javascript avec pour titre:
Code:
FA7UP_f9ea5076: MyBBCode
placement: sur toutes les pages
contenu:
Code:
/* FA7UP_f9ea5076: MyBBCode */
$(function(){
    var BBCodes=[["{PA_CSS}","<div class=\"cheminPA\"><img src=\"//fa7up.fr/svg/rouage.svg\" /><span>Panneau d'administration</span><span>Affichage</span><span>Couleurs</span>\n\n<span>Feuille de style CSS</span></div>"],["{PA_HTML}","<div class=\"cheminPA\"><img src=\"//fa7up.fr/svg/rouage.svg\" /><span>Panneau d'administration</span><span>Modules</span><span>Gestion des pages HTML</span></div>"],["{PA_JS}","<div class=\"cheminPA\"><img src=\"//fa7up.fr/svg/rouage.svg\" /><span>Panneau d'administration</span><span>Modules</span><span>Gestion des codes Javascript</span></div>"],[/\{PA_([^\}]+)\}/g,function(m,m1){return"<div class=\"cheminPA\"><img src=\"//fa7up.fr/svg/rouage.svg\" /><span>Panneau d'administration</span><span>"+m1.split("&gt;").join("</span><span>")+"</span></div>"}]];
    /*
     *
     */
    if(!BBCodes.length)return;
    $(".postbody,.mod_news,.mod-news").each(function(){
        var exclusion=[];
        /*exclusion code*/
        $(".codebox").each(function(i){
            var id="MyBBCode_"+i+"_"+Date.now()+"_"+Math.round(Math.random()*1E12);
            exclusion[id]=$(this).clone(true,true);
            $(this).replaceWith($("<i>",{"id":id,"text":id}));
        });
        /**/
        for(var ii=0;ii<BBCodes.length;ii++){
            this.innerHTML=this.innerHTML.replace(BBCodes[ii][0],BBCodes[ii][1])
        }
        /*restaurer code*/
        for(var i in exclusion){
            $("#"+i).replaceWith(exclusion[i])
        }
    })
});
/* FA7UP_f9ea5076_stop */

Nous allons maintenant ajouter un peu de CSS:

Panneau d'administration > Affichage > Couleurs > Feuille de style CSS

Ajouter le code CSS suivant:
Code:
/*cheminPA*/
.cheminPA{
     display:inline-block;
     font-family:monospace;
     line-height:1.1em;
     font-size:1.1em;
     font-weight:800;
     color:#1c1c1c;
     border:grey solid 1px;
     padding:.3em .3em .3em 1.8em;
     border-radius:.3em;
     position:relative;
     box-sizing:border-box;
}
.cheminPA > img {
     height: 1.5em;
     position: absolute;
     left: -1px;
     top: -1px;
     border: grey solid 1px;
     border-radius: 0.3em 0em 0.3em 0;
     box-sizing: border-box;
}
.cheminPA>span:nth-child(1n+3)::before{
     color: #FF9000;
     content: " \25B6  ";
}

Une fois validé, il ne vous reste plus qu'à créer un sujet dans lequel vous mettrez comme contenu:
Code:
[code]{PA_CSS}

{PA_HTML}

{PA_JS}

{PA_Un>Chemin>Dans>Votre>PA}[/code]

{PA_CSS}

{PA_HTML}

{PA_JS}

{PA_Un>Chemin>Dans>Votre>PA}

Vous constaterez donc que les BBCodes inscrits dans la balise code n'ont pas étés transformés alors que ceux qui suivent l'ont étés :
Les 3 premiers sont ceux en mode texte, le dernier en regexp ce qui vous permet de modifier le chemin à votre aise par exemple:
Code:
{PA_Ce>petit>chemin>qui>sent>la>noiseeeeeteuh !}

Ce système de remplacement est vraiment très puissant, il nécessite de faire un effort d'apprentissage pour l'écriture des regexp, si le type de remplacement est "texte" alors c'est au contraire très simple, maintenez la souris sur le point d'interrogation près de "Type de remplacement" afin d'avoir quelques exemples basiques.

Re: [TOUTES VERSIONS] FA7UP- MyBBCode

Astuce le Sam 3 Mar 2018 - 18:56
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Arnaud,
tu pouvais le publier directement mon ami clin oeil .

Merci beaucoup pour ce chef d’œuvre hinhin



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: [TOUTES VERSIONS] FA7UP- MyBBCode

Astuce le Sam 3 Mar 2018 - 19:02
no_way
avatar
Milouzien

Messageno_way

  • 16px
  • 24px
  • Zoom
Merci bien mon ami, je préfère quand même avoir ton aval dans pareil cas ^^

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum