Ajout d'un bouton dans le "QUICKREPLY"

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsouar à tous et toutes,

Ce soir j'ai créé une fonctionnalité par JS qui permet de cacher le contenu d'un texte uniquement pour un joueur ou des joueurs tant que ceci étaient inscrits dans une balise suivante :

Code:

[custom-hide-"Alìsh"]Ceci est un message que seul Alìsh peut voir.[/custom-hide]

Cependant, j'ai tenté de chercher, en vain, comment modifier le comportement de la balise "hide" pour qu'elle affiche :

Code:

[hide][custom-hide-"NOM JOUEUR1, NOM JOUEUR2"][/custom-hide][/hide]

Aussi je me disais que peut-être devrait-on créer un bouton sur le quickreply  ?
Est-ce seulement possible ?

Merci à tous les passionnés.

[Toryudo]

Bonjour !

Normalement, le tuto https://forum.forumactif.com/t407168-creation-de-balises-bbcode-personnalisees explique comment ajouter un nouveau bouton en point 5), et ça fonctionne à la fois pour reply et quickreply, je viens de retester. Je pense que la balise ouvrante peut être :

Code:

[hide][custom-hide-"NOM JOUEUR1, NOM JOUEUR2"]

et la balise fermante peut être :

Code:

[/custom-hide][/hide]

[Kaehlyth]

Oh pardon, mille excuse je n'ai pas su trouver le tutoriel (je plaide coupable de ne pas avoir pensé qu'un tutoriel existait) !

Je suis confuse.
Je teste ça, merci...

---

EDITION:

J'ai du mal à comprendre. Désolé.

J'ai créé un code qui est custom-hide, pourquoi rajouter la balise hide ?
Dans le doute, j'ai gardé la balise custom-hide que j'ai ajouté en supprimant celles par défaut proposé par le code.


J'ai rajouté ceci en suivant le guide et impossible de charger mon forum en cochant "afficher sur toutes les pages". 

Quelque chose est en conflit.

Code:

/*
 *  Application: Create New BBCode Tags - Creation de nouvelles balises BBCode
 *  Date: 18/05/2018 - Adaptation pour le forum des forums mai 2022
 *  Version: 1.321052018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it - Code libre. Vous pouvez le redistribuer et/ou le modifier
 */
(function() {
    BBParser = {
        initialize: function() {
            $(function() {
                BBParser.setupBBParser();
            });
        },
        add: [

            {
                tag: 'custom-hide',
                close: true,
            }
            /*Ajoutez ici les balises supplémentaires souhaitées ou vos balises personnalisées - Ne pas oublier de mettre une virgule après l'accolade fermante } de la balise précédente.*/
 
            // Note  : Ne pas ajouter de virgule après la dernière entrée
        ],
        // Il est conseillé de ne rien modifier en dessous de cette ligne
        validateTag: function(a) {
            if (!/^\w+$/.test(a)) throw new RangeError("You added an invalid tag: " + a);
        },
        replacers: function(a, b, c) {
            return (a || "").replace(/{option}/g, b || "").replace(/{content}/g, c || "");
        },
        optionReg: /.*?=("|'|)(.*?)\1\]/,
        parsedContent: function(a, b, c) {
            return a.replace(c ? RegExp("(\\[" + b.tag + "[^\\]]*\\])([\\s\\S]*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(d, e, f) {
                c || (e = d);
                e = BBParser.optionReg.test(e) ? e.replace(BBParser.optionReg, "$2") : b.defaultOption;
                if("undefined" !== typeof b.replace) {
                    d = c ? b.replace(e, f) : b.replace(e);
                    "string" === typeof d ? c ? f = d : e = d : d;
                    "object" === typeof d && (e = d.option || e, f = d.content || f);
                }
                return BBParser.replacers(b.replacement, e, f);
            });
        },
        setupBBParser: function() {
            var selectors = {
                "subsilver": 'div.postbody, .forumline.mod_news .content, div.blog_message',
                "prosilver": 'div.postbody div, div.post.search .postbody, div.blog_message, .module.mod_news .content',
                "punbb": 'div.post-entry, .module.mod_news .body, div.blog_message',
                "invision": 'div.post-entry, .box-content.mod_news .postbody-entry, div.blog_message',
                "modernbb": 'div.postbody div, div.post.search .postbody, div.blog_message, .mod_news .content',
                "awesomebb": 'div.post-content, div.block-blogrow-content, div.block.block-comment .content, div.block-pm .content, div.mod-news .content',
                "mobi_modern" : 'div.post-content, .mod-news-header + .content '
            };
            if($("#mpage-body-modern").length) {
                var postBody = $(selectors["mobi_modern"]);
            }
            else if(selectors.hasOwnProperty(_userdata["tpl_used"])) {
                var postBody = $(selectors[_userdata["tpl_used"]]);
            }
            else {
                var postBody = $(selectors["prosilver"]);
            }
            for (var i = 0, e;(e = postBody[i++]);) {
                for (var j in BBParser.add) {
                    var item = BBParser.add[j];
                    // Validating tag
                    BBParser.validateTag(item.tag);
                    e.innerHTML = BBParser.parsedContent(e.innerHTML, item, item.close);
                }
            }
        }
    };
    BBParser.initialize()
})();

   $(function(){$(function(){
 
      /*Ajout d'un bouton */ $('<a class="sceditor-button" unselectable="on" title="Commentaire au MJ"><div unselectable="on" style="background-image:url(https://2img.net/i/fa/icon_twemoji.png)">Commentaire au MJ</div></a>').insertAfter('.sceditor-button-youtube').click(function(){
        $('#text_editor_textarea').sceditor("instance").insertText("[custom-hide-"VOTRE NOM,Conteuse des Rêves"]","[/custom-hide]");
      }); /*Fin ajout d'un bouton*/
 
    })});

Voici le code JS (séparé) de la balise que j'ai créé avec le nom "Message au MJ" affiché "Sur les suejts" :



Merci de la réponse.

---

EDITION 2:

Apparemment, c'est cette partie qui fait que le forum charge dans le vide... J'ai pourtant écrit exactement comme sur le tutoriel. 

Code:

$(function(){$(function(){
 
      /*Ajout d'un bouton */ $('<a class="sceditor-button" unselectable="on" title="Commentaire au MJ"><div unselectable="on" style="background-image:url(https://i.servimg.com/u/f44/20/41/07/60/eau10.png)">Commentaire au MJ</div></a>').insertAfter('.sceditor-button-youtube').click(function(){
        $('#text_editor_textarea').sceditor("instance").insertText("[custom-hide-"VOTRE NOM,Conteuse des Rêves"]","[/custom-hide]");
      }); /*Fin ajout d'un bouton*/
 
    })});

[Toryudo]

Ce n'est pas forcément évident, mais il y a un indice quand on affiche le code ici par exemple :

Code:

$(function(){$(function(){
 
      /*Ajout d'un bouton */ $('<a class="sceditor-button" unselectable="on" title="Commentaire au MJ"><div unselectable="on" style="background-image:url(https://i.servimg.com/u/f44/20/41/07/60/eau10.png)">Commentaire au MJ</div></a>').insertAfter('.sceditor-button-youtube').click(function(){
        $('#text_editor_textarea').sceditor("instance").insertText("[custom-hide-"VOTRE NOM,Conteuse des Rêves"]","[/custom-hide]");
      }); /*Fin ajout d'un bouton*/
 
    })});

Au niveau de :

Code:

"[custom-hide-"VOTRE NOM,Conteuse des Rêves"]"

Quand on écrit une chaine de caractères, elle commence par " et termine par ".
Au second caractère " rencontré, c'est donc la fin de la chaine de caractère, et ce qui suit est du code Javascript.
Ici, la chaine est donc "[custom-hide-" (en jaune) et ensuite, VOTRE NOM et ce qui suit ne fait pas partie de la chaine de caractère (en d'autres couleurs, le code essaye de comprendre ce qui se passe, mais il ne comprend plus).

Pour dire au JavaScript qu'on veut écrire le caractère " dans une chaine de caractère, il faut rajouter un \ juste avant :

Code:

$(function(){$(function(){
 
      /*Ajout d'un bouton */ $('<a class="sceditor-button" unselectable="on" title="Commentaire au MJ"><div unselectable="on" style="background-image:url(https://i.servimg.com/u/f44/20/41/07/60/eau10.png)">Commentaire au MJ</div></a>').insertAfter('.sceditor-button-youtube').click(function(){
        $('#text_editor_textarea').sceditor("instance").insertText("[custom-hide-\"VOTRE NOM,Conteuse des Rêves\"]","[/custom-hide]");
      }); /*Fin ajout d'un bouton*/
 
    })});

Et là il comprend !

[Kaehlyth]

Oh ! 

Je comprends. Comme quoi, on a beau utiliser des outils pour nous apprendre, nous aider, ça ne fait pas de nous des apprentis. 
Je ne me ferais plus avoir par le \\ ! J'avais remarqué l'occurrence en bleue, c'est ce qui m'a permis d'éditer et de voir ce qu'il en était. 

Par contre, le bug semble bien là.
Le forum ne tourne plus en boucle mais mon quickreply est tout cassé : 




Le code est actuellement actif.
Pourtant, j'ai ajouté que ceci : 

Code:

(function() {
    BBParser = {
        initialize: function() {
            $(function() {
                BBParser.setupBBParser();
            });
        },
        add: [
 
            {
                tag: 'custom-hide',
                close: true,
            }
            /*Ajoutez ici les balises supplémentaires souhaitées ou vos balises personnalisées - Ne pas oublier de mettre une virgule après l'accolade fermante } de la balise précédente.*/
 
            // Note  : Ne pas ajouter de virgule après la dernière entrée
        ],
        // Il est conseillé de ne rien modifier en dessous de cette ligne

 Le Javascript, c'est une belle chose, mais alors ça demande une vrai formation.

[Toryudo]

Ah, c'est quelque chose que je viens de voir dans le code et dans le tuto aussi :

Valeurs possibles :

• Une chaine de caractères correspondant au nom de votre choix pour la balise ;
  
• Utilisez uniquement des lettres dans le tag ;
  
• Comme toute chaine de caractères, il doit être indiqué entre guillemets simples ou doubles.

Vous ne pouvez pas mettre de tiret - dans le nom du tag, il faut uniquement des lettres, voilà pourquoi ça ne marche pas.
Plus précisément, vous pouvez mettre des minuscules, des majuscules, des chiffres et le caractère underscore (pas d'accents non plus, ni de ç).

[Kaehlyth]

Oui tout à fait.
En vérité que ce soit custom-hide ou customhide, soit l'un fait que le JS déforme le quickreply, soit que le bouton n'existe pas dans le quickreply. 


Je crois bien me donner l'impression de ne rien comprendre, pas même les bases alors que pourtant, me semble bien avoir fait les choses (hormis le \ pour la chaîne de JS qui m'était parfaitement inconnu).

j'ai changé mon code de custom-hide par : customhide et ... le code ne marche plus.

J'entends par là que depuis l'ajout du bouton et son JS, le code cesse de fonctionner. Le texte est caché même si moi "Conteuse des Rêves" suit dedans et le bouton même disparait du quickreply.

---

EDIT 1

J'ai donc changé le "regex" pour que le customhide-"NOM" se change en : customhide"NOM" donc ça déjà c'est fait ! 


Maintenant, le code de l'ajout du bouton ne parait pas fonctionner.
En effet, le bouton ne s'ajoute pas MAIS le code "customhide" continue de fonctionner SAUF si je l'ajoute dans le nouveau code d'ajout dans le quickreply.

Code:

document.addEventListener("DOMContentLoaded", function() {
    var username = _userdata.username; // Nom de l'utilisateur connecté

    // Sélectionne toutes les balises qui correspondent au modèle [customhide"NOM1,NOM2"]
    var hideElements = document.querySelectorAll(".postbody");

    hideElements.forEach(function(postBody) {
        postBody.innerHTML = postBody.innerHTML.replace(/\[customhide"(.*?)"\](.*?)\[\/customhide\]/g, function(match, p1, p2) {
            // p1 est la chaîne de noms d'utilisateur spécifiée dans la balise
            var allowedUsers = p1.split(","); // Sépare les noms par la virgule

            if (allowedUsers.includes(username)) {
                return '<div class="customhide">' + p2 + '</div>'; // Affiche le contenu si le nom correspond
            } else {
                return ''; // Masque le contenu si aucun nom ne correspond
            }
        });
    });
});

Code:

/*
 *  Application: Create New BBCode Tags - Creation de nouvelles balises BBCode
 *  Date: 18/05/2018 - Adaptation pour le forum des forums mai 2022
 *  Version: 1.321052018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it - Code libre. Vous pouvez le redistribuer et/ou le modifier
 */
(function() {
    BBParser = {
        initialize: function() {
            $(function() {
                BBParser.setupBBParser();
            });
        },
        add: [
 
            {
                tag: 'customhide',
                close: true,
            }
            /*Ajoutez ici les balises supplémentaires souhaitées ou vos balises personnalisées - Ne pas oublier de mettre une virgule après l'accolade fermante } de la balise précédente.*/
 
            // Note  : Ne pas ajouter de virgule après la dernière entrée
        ],
        // Il est conseillé de ne rien modifier en dessous de cette ligne
        validateTag: function(a) {
            if (!/^\w+$/.test(a)) throw new RangeError("You added an invalid tag: " + a);
        },
        replacers: function(a, b, c) {
            return (a || "").replace(/{option}/g, b || "").replace(/{content}/g, c || "");
        },
        optionReg: /.*?=("|'|)(.*?)\1\]/,
        parsedContent: function(a, b, c) {
            return a.replace(c ? RegExp("(\\[" + b.tag + "[^\\]]*\\])([\\s\\S]*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(d, e, f) {
                c || (e = d);
                e = BBParser.optionReg.test(e) ? e.replace(BBParser.optionReg, "$2") : b.defaultOption;
                if("undefined" !== typeof b.replace) {
                    d = c ? b.replace(e, f) : b.replace(e);
                    "string" === typeof d ? c ? f = d : e = d : d;
                    "object" === typeof d && (e = d.option || e, f = d.content || f);
                }
                return BBParser.replacers(b.replacement, e, f);
            });
        },
        setupBBParser: function() {
            var selectors = {
                "subsilver": 'div.postbody, .forumline.mod_news .content, div.blog_message',
                "prosilver": 'div.postbody div, div.post.search .postbody, div.blog_message, .module.mod_news .content',
                "punbb": 'div.post-entry, .module.mod_news .body, div.blog_message',
                "invision": 'div.post-entry, .box-content.mod_news .postbody-entry, div.blog_message',
                "modernbb": 'div.postbody div, div.post.search .postbody, div.blog_message, .mod_news .content',
                "awesomebb": 'div.post-content, div.block-blogrow-content, div.block.block-comment .content, div.block-pm .content, div.mod-news .content',
                "mobi_modern" : 'div.post-content, .mod-news-header + .content '
            };
            if($("#mpage-body-modern").length) {
                var postBody = $(selectors["mobi_modern"]);
            }
            else if(selectors.hasOwnProperty(_userdata["tpl_used"])) {
                var postBody = $(selectors[_userdata["tpl_used"]]);
            }
            else {
                var postBody = $(selectors["prosilver"]);
            }
            for (var i = 0, e;(e = postBody[i++]);) {
                for (var j in BBParser.add) {
                    var item = BBParser.add[j];
                    // Validating tag
                    BBParser.validateTag(item.tag);
                    e.innerHTML = BBParser.parsedContent(e.innerHTML, item, item.close);
                }
            }
        }
    };
    BBParser.initialize()
})();
 
   $(function(){$(function(){
 
      /*Ajout d'un bouton */ $('<a class="sceditor-button" unselectable="on" title="Commentaire au MJ"><div unselectable="on" style="background-image:url(https://www.zupimages.net/up/24/36/oenu.png)">Commentaire au MJ</div></a>').insertAfter('.sceditor-button-faroll').click(function(){
        $('#text_editor_textarea').sceditor("instance").insertText("[customhide"VOTRE NOM,Conteuse des Rêves"]","[/customhide]");
      }); /*Fin ajout d'un bouton*/
 
    })});

Ici l'image si j'ai customhide dans les deux codes.

---

EDIT 2

J'ai ces deux codes fusionnés en un qui me permettent de rajouter des boutons au quickreply et d'afficher ceux que je veux. Est-ce que par hasard ce code n'est-il pas plus simple ?

Code:

$(document).ready(function() {
  toolbar = 'bold,italic,underline,strike|left,center,right,justify|faroll,fahide|servimg,image,,link,embed,youtube|headers,size,color,font,removeformat,quote|,pastetext,source,lienediteur';
});


function clicediteur(lienediteur) {
    window.open(lienediteur);
}

$(document).ready(function() {
    // Vérifie si l'éditeur SCEditor est initialisé dans le quickreply
    function ajouterBoutonsQuickReply() {
        if ($('#quick_reply #text_editor_textarea').sceditor("instance")) {
            $('<a class="sceditor-button sceditor-button-dico" unselectable="on" title="Correcteur orthographique"><div unselectable="on" style="background-image:url(https://www.zupimages.net/up/24/36/if06.png)">Correcteur</div></a>').insertAfter('#quick_reply .sceditor-button-source').click(function() {
                $('#quick_reply #text_editor_textarea').sceditor("instance").onclick = clicediteur("https://languagetool.org/fr");
            });

            $('<a class="sceditor-button sceditor-button-syno" unselectable="on" title="Synonymes"><div unselectable="on" style="background-image:url(https://www.zupimages.net/up/24/36/ehp3.png)">Synonymes</div></a>').insertAfter('#quick_reply .sceditor-button-dico').click(function() {
                $('#quick_reply #text_editor_textarea').sceditor("instance").onclick = clicediteur("https://www.synonymo.fr/");
            });

            $('<a class="sceditor-button sceditor-button-patron" unselectable="on" title="BonPatron"><div unselectable="on" style="background-image:url(https://2img.net/i/fa//i/smiles/star3.png)">BonPatron</div></a>').insertAfter('#quick_reply .sceditor-button-syno').click(function() {
                $('#quick_reply #text_editor_textarea').sceditor("instance").onclick = clicediteur("http://bonpatron.com/");
            });

            $('<a class="sceditor-button sceditor-button-zupimage" unselectable="on" title="Hébergeur zupimages"><div unselectable="on" style="background-image:url(https://i.servimg.com/u/f18/18/56/25/16/zoklet10.png)">zupimages</div></a>').insertAfter('#quick_reply .sceditor-button-link').click(function() {
                $('#quick_reply #text_editor_textarea').sceditor("instance").onclick = clicediteur("https://www.zupimages.net/");
            });
        } else {
            // Réessaye après un court délai si SCEditor n'est pas encore initialisé
            setTimeout(ajouterBoutonsQuickReply, 500);
        }
    }

    ajouterBoutonsQuickReply();
});

---

DERNIER EDIT 

ça marche avec le second code très ancien que j'avais !
Le code de base donc, celui sur lequel j'ai buté et que nous buttons tous les deux, semble avoir un soucis. Je laisse le sujet ouvert car c'est sûreent moi le soucis...

Celui-ci par contre, fonctionne parfaitement !

Code:

         $('<a class="sceditor-button" unselectable="on" title="Commentaire au MJ"><div unselectable="on" style="background-image:url(https://www.zupimages.net/up/24/36/owcd.png)">Commentaire au MJ</div></a>').insertAfter('#quick_reply .sceditor-button-link').click(function() {
                var editor = $('#quick_reply #text_editor_textarea').sceditor("instance");
                editor.insertText('[customhide"VOTRE NOM,Conteuse des Rêves"]', '[/customhide]');
            });

C'est pour ma part plus simple et accessible.

[Toryudo]

Bonjour !

Ça doit venir du fait qu'il y a énormément de façon d'écrire une chaine de caractères.
Avec des ', avec des " ou même avec des `
On peut écrire :

Code:

"[customhide\"VOTRE NOM,Conteuse des Rêves\"]"

ou

Code:

'[customhide"VOTRE NOM,Conteuse des Rêves"]'

ou

Code:

`[customhide"VOTRE NOM,Conteuse des Rêves"]`

Mais oui, pas contre, toujours pas :

Code:

"[customhide"VOTRE NOM,Conteuse des Rêves"]"

[Kaehlyth]

D'accord. Merci beaucoup.

J'admets la méthode trouvée plus intuitive me concernant mais, le plus important , c'est que j'ai compris les bases des chaînes de caractères

Je marque en résolu.
Merci encore !