Ajouter son propre BBCode ?

[Joke]

Bonjour à tous, et au brillant staff,

Je fais des petites expériences sur mon forum... Ça fait depuis deux jours que j'écume le net et votre forum pour trouver comment rajouter du BBCode à mon forum...

J'ai lu ce sujet : https://forum.forumactif.com/t280344-ajout-de-bb-code

La première réponse était "aller dans Templates>>Général>> bbcode", mais je n'ai pas ça dans mes templates, peut-être parce que je suis avec PunBB.

Ensuite on dit d'insérer le script javascript tout à la fin du template viewtopic_body, j'ai donc essayé avec les deux exemples donnés [background] et [infobulle]... Aucun des deux ne fonctionnent. J'ai essayé de retirer les "<!--", ou de les remplacer par des "//<![CDATA[" comme les scripts présents dans les templates (je me demande pourquoi d'ailleurs), mais ça ne fonctionne toujours pas...

Dans mon cas je n'ai nullement besoin d'ajouter un bouton, je veux simplement intégrer une nouvelle balise, n'importe laquelle, et que cela fonctionne pour que je puisse avoir une base d'intégration pour continuer mes expériences...

Merci beaucoup.

EDIT : Un nouveau problème est survenu, le détail est dans mon message juste en dessous ! : \

[Joke]

Bonjour, un petit UP et une catastrophette :

J'ai eu la brillante idée de me dire "si on peut insérer du html avec la censure des mots... peut-être qu'on peut insérer du javascript ?"

J'ai donc commencé à bidouiller sauvagement :

Code:

"[galery]", remplacer par : "<script type="text/javascript">alert('"

En souhaitant faire ensuite :

Code:

"[/galery]", remplacer par : "')</script>"

Rien que pour vérifier, si je fais [galery]bilou[/galery], si ça me fait bien un pop-up avec "bilou" à l'intérieur.

Seulement, catastrophe : J'ai fait bugger la page du panneau d'administration : ' (



En effet, en affichant le panneau, le navigateur exécute mon code javascript incomplet et fait bugger l'affichage, ce qui m'empêche d'ajouter d'autres mots censurés, ou de retirer celui que j'ai créé...

Quelque chose me dit que ma brillante idée est une grosse bêtise à ne pas faire...

[Joke]

J'ai réussi à débugger le panneau d'admin !

En effet, mon sript empêchait le bouton "modifier" de s'afficher, et du coup je ne pouvais plus ajouter ni modifier les censures.

La solution : Je suis allé regarder le code source pour récupérer le lien du bouton "modifier" disparu, afin de pouvoir accéder à la page où je pourrais modifier ma censure pour réparer mon erreur :

J'ai eu ça :

Code:

/admin/index.forum?id=1&mode=edit&part=general&sub=censure&tid=SuperIDDuPanneauDAdminEnExadécimal

J'ai simplement du rajouter l'url de mon forum avant /admin, et supprimer les amp; du lien pour avoir :

Code:

http://MonSuperForum.com/admin/index.forum?id=1&mode=edit&part=general&sub=censure&tid=SuperIDDuPanneauDAdminEnExadécimal

J'ai donc pu accéder à la page où l'on modifie la censure du mot qui buggait, retirer mon vilain code javascript du champ "Remplacement", ce qui permet maintenant au panneau d'admin de s'afficher correctement.



Ce qui fait que je me retrouve toujours avec le même souci, je n'arrive toujours pas à rajouter mon propre BBCode !

Mais j'ai trouvé quelques pistes chez vous...

https://forum.forumactif.com/t323004-javascript-et-censure-des-mots
https://forum.forumactif.com/t326141-censure-des-mots-petit-soucis?highlight=bug+censure
https://forum.forumactif.com/t311476-censure-des-messages-en-javascript?highlight=bug+censure

Je ne mets pas encore le topic en "Résolu" simplement car je n'ai toujours pas ce que je veux. Lorsque j'arriverais à quelque chose de bien, je partagerais ma méthode pour que mon topic serve au moins à quelque chose pour ceux qui veulent faire la même chose ou utiliser ce que je vais peut-être faire.

Ce que je veux faire en fait, c'est une balise avec un nombre variable d'arguments qui seraient des adresses d'image, qui créerait en javascript une galerie sous forme de mosaique esthétique avec toute les images en miniature dedans, que l'on pourrait alors visualiser une par une.

Merci.

[Ea]

Bonjour,


Bien joué pour débloquer ^^

https://forum.forumactif.com/t311476-censure-des-messages-en-javascript permet de faire un remplacement textuel, attribut ou html

pour votre cas j'imagine que vous pourriez simplifier le script en :

Code:

$(function() {

  var pattern = /\[gal\](.*?)\[\/gal\]/g;
  var replacement = '<div class="gal">$1</div>';

  $(window).bind("load", function() {
    setTimeout(function() {
      $("div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : "")).each(function() {
          pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
      });
      // maintenant vous avez des éléments <div class="gal">...</div> à la place des [gal]...[/gal]
      $("div.gal").each(function(){
        // faire ce que vous souhaitez avec le contenu
        $(this).text("---]] "+$(this).text()+" [[---");
      });
    }, 600)
  })
});

Vous pouvez encore le raccourcir en remplaçant :

Code:

$("div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : ""))

pour un sélecteur des posts pour votre version de forum ( là ça devrait fonctionner pour les 4 )

Et le setTimeout ainsi que le $(window).load sont là parce qu'autrement le script pouvait parfois empêcher le fonctionnement du script de redimensionnement d'image de forumactif.

Donc si vous n'utilisez pas cette fonctionnalité, vous pourriez réduire le script à :

Code:

$(function() {

  var pattern = /\[gal\](.*?)\[\/gal\]/g;
  var replacement = '<div class="gal">$1</div>';

  $("div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : "")).each(function() {
      pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
  });
  // maintenant vous avez des éléments <div class="gal">...</div> à la place des [gal]...[/gal]
  var i = 0;
  $("div.gal").each(function(){
    i++;
    // faire ce que vous souhaitez avec le contenu
    $(this).text("balise galerie "+i+" ---> "+$(this).text());
  });

});

Cordialement.

[Joke]

Merci beaucoup, Ea ! Ce code fonctionne à merveille, il ne me reste plus qu'à m'amuser avec. ^^

Déjà je n'ai appris que dernièrement que le JS étrange que je voyais par-ci par-là était du jQuery, ça va me permettre d'apprendre cette bibliothèque en plus du JS normal.

Je mets en résolu, si j'arrive à quelque chose d'intéressant je partagerais sûrement ce que j'ai fait sur ce topic (si c'est encore possible, au pire si le topic est verrouillé j'édite ce dernier message). =)

[Ea]

Ce ne sera pas possible si vous mettez en résolu, les sujets résolus sont déplacés en archives ( et les archives sont verrouillées donc éditer ou répondre à un sujet n'y est pas possible ).

Vous pouvez le laisser le sujet sans réponse 7 jours sans que ça soit déplacé à la corbeille.

Sinon la librairie jquery est bien car :

- elle est inclue de base sur forumactif,
- elle "cache" un certain nombre de choses différentes qu'il faudrait faire suivant les navigateurs,
- elle a une bonne documentation ( forumactif utilise la version 1.7.2 donc une fonctionnalité d'une version plus récente ( il n'y en a pas des tonnes ) ne fonctionnera pas ( ou différemment ) ),
- elle permet de coder des choses courantes ( ajax, manipulation du DOM, animation, ... ) rapidement.

[Joke]

Bonjour,

Merci pour ces informations supplémentaires, voici de mes nouvelles :

A terme je compte faire une balise complexe avec un nombre d'arguments indéfini, mais en attendant j'ai modifié votre code pour permettre de créer rapidement plusieurs balises sous leur forme la plus générique :

Code:

[variable0] contenu [/variable0]

remplacer par :

<variable1 class="variable2"> contenu </variable1>

Avec pour le coup :
variable0 = nom de la balise BBCode
variable1 = nom de la balise HTML de remplacement
variable2 = nom de la classe de la  balise HTML de remplacement

Et on peut ainsi donner ces noms sous la forme d'un tableau, avec la même méthode que le topic des censures.

Voici le code :

Code:

/*Extention du BBCode

Exemple :   ['0',   '1',   '2'   ],
0 = nom de la balise BBCode
1 = nom de la balise HTML de remplacement
2 = nom de la classe de la balise HTML de remplacement*/

var balise =[
      ['full',   'div',   'full'   ],
      ['h1',   'h1',   'titrea'   ],
      ['h2',   'h2',   'titreb'   ],
      ['h3',   'h3',   'titrec'   ],
      ['h4',   'h4',   'titred'   ],
];

$(function() {
  $("div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : "")).each(function() {
    for(var a in balise) {
      var patternstr = "\\["+balise[a][0]+"\\](.*?)\\[\\/"+balise[a][0]+"\\]";
      var pattern = new RegExp(patternstr, 'g');
      var replacement = '<'+balise[a][1]+' class="'+balise[a][2]+'">$1</'+balise[a][1]+'>';
      pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
    }
  });
});

La question du noob : Mon script a l'air de tourner en boucle, en effet si je met une alerte dedans, elle s'affichera à l'infini... C'est possible d'optimiser ce code de sorte à n'avoir qu'une seule exécution, ou bien c'est déjà parfaitement normal comme ça ?
EDIT : En y réfléchissant... Ce devait certainement être l'utilité du "setTimeout" que vous m'avez conseillé de retirer ?

Mais encore : Tout autre conseil d'optimisation sera la bienvenue pour un script de jeune débutant comme moi !

Merci beaucoup pour m'avoir permis d'en arriver là déjà !

Vous pouvez encore le raccourcir en remplaçant :

Code:

$("div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : ""))

pour un sélecteur des posts pour votre version de forum ( là ça devrait fonctionner pour les 4 )

Je ne connais pas assez bien les sélecteurs encore, mais réduire à punBB ça ferait :

Code:

$(".post-entry div:not(.clear)" : $("#pun-foot").length))

?

Mais en attendant je veux bien faire quelque chose qui fonctionne sur tous les types, c'est plus convivial. ^^

[Ea]

Le sélecteur css pour les 4 versions :

Code:

$("div.postbody div" + ($("body#phpbb").length ? ".content div" : $("#ipbwrapper").length ? ".post-entry div:not(.clear)" : $("#pun-foot").length ? ".entry-content div div:not(.clear)" : ""))

a un problème pour phpbb2.

Je l'ai remplacé dans le tutoriel par ceci qui devrait aller mieux :

Code:

$("div.postbody " + ($("body#phpbb").length ? "div.content div" : $("#ipbwrapper").length ? "div.post-entry div:not(.clear)" : $("#pun-foot").length ? "div.entry-content div div:not(.clear)" : "> div:first-child"))

avec cette correction on ne devrait passer dans la boucle que " nombre de balise * nombre de post " fois sur toutes les versions ( sans la correction on y passait au moins " nombre de balise * 2 * nombre de post " fois ).

Le (.*?) ne correspondra jamais à un retour à la ligne, alors que c'est souhaité j'imagine pour [full]...[/full], si c'est le cas il faudrait remplacer . par [\s\S] ( \s représente l'ensemble des caractères d'espace blanc, \S tout les autres caractères ).

( si vous utilisez RegExp il faut doubler les \ comme vous l'avez fait pour le reste )

Ensuite la seule modification que je verrais serait de remplacer :

Code:

    for(var a in balise) {
      var patternstr = "\\["+balise[a][0]+"\\](.*?)\\[\\/"+balise[a][0]+"\\]";
      var pattern = new RegExp(patternstr, 'g');
      var replacement = '<'+balise[a][1]+' class="'+balise[a][2]+'">$1</'+balise[a][1]+'>';
      pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
    }

par :

Code:

 var content = $(this).html();
 var save_content = content;
 for (var a in balise) {
    var patternstr = "\\[" + balise[a][0] + "\\](.*?)\\[\\/" + balise[a][0] + "\\]";
    var pattern = new RegExp(patternstr, 'g');
    var replacement = '<' + balise[a][1] + ' class="' + balise[a][2] + '">$1</' + balise[a][1] + '>';
    pattern.test(content) && (content = content.replace(pattern, replacement))
 }
 if (content != save_content) $(this).html(content);

car un accès à une variable devrait être plus rapide qu'un accès au DOM, mais avec la vitesse des navigateurs de notre époque il est possible que ça ne change pas grand chose.

[Joke]

Merci encore pour ce nouveau coup de pouce avisé, cependant le nouveau sélecteur ne semble pas fonctionner pas chez moi (Je suis avec punBB), alors que l'ancien fonctionne (malgré le fait qu'il semble tourner en boucle...)

Pour le reste, ça fonctionne parfaitement.

[Ea]

j'ai testé à nouveau un peut tout les cas, ceci devrait fonctionner pour la revue, l'affichage, et la prévisualisation de messages sur les 4 versions :

Code:

var phpbb3 = "body#phpbb", invision = "#ipbwrapper", punbb = "#pun-foot";

$( $(phpbb3).length ? "div.postbody > div.content" : $(invision).length ? "div.postbody > div.post-entry" : $(punbb).length ? "div.post div.post-entry" : "div.postbody" )

la seule différence devrait être qu'en phpbb2, la signature est prise dans la censure, mais sans ça la prévisualisation et revue de message ne serait pas "censurées" ( car la structure est différente ).

[Joke]

Merci beaucoup encore, cette fois ci ça fonctionne !

J'ai besoin d'en savoir plus avant de partir dans du BBCode moins conventionnel :

D'abord, à quoi sert cette nouvelle ligne ? "if (content != save_content) $(this).html(content);" EDIT : J'ai compris en fait.

Ensuite, on est obligé de tester le pattern ("pattern.test(content)") ?
Si j'ai bien compris ça vérifie si la balise BBCode est utilisée dans la page, mais si elle n'est pas utilisée, "(content = content.replace(pattern, replacement))" peut faire bugger s'il n'y a pas le test préalable ?

Aussi, au lieu de redéclarer les variables à chaque fois dans la boucle, c'est pas mieux de les déclarer une première et dernière fois au tout début ? du genre :

Code:

var patternstr, pattern, replacement, content, save_content;

au début.

[Ea]

En fait il vaut mieux minimiser les fois où on écrit et lit du html. Les navigateurs sont de plus en plus rapides, mais pour des messages de milliers de caractères, il arrive que ça ait son effet.

Pour donner un exemple la colorisation de code sur ce forum faisait planter l'affichage de page à cause de calculs trop grand ( quand quelqu'un mettait des codes de plus de 30 000 caractères ). On a donc mis un certain nombre de test "rapide" pour déterminer si un code sera "colorisé" ou pas :

Code:

!is_ie && $("code").filter(function () {
        var a = $(this).text(),
            b = a.indexOf("["),
            c = a.indexOf("]"),
            d = a.indexOf("[/"),
            e = a.indexOf("<"),
            f = a.indexOf('"'),
            g = a.indexOf("'"),
            h = a.indexOf("/");
        return 5000 > a.length && (-1 == b || -1 == c || -1 == d || b > c || c > d || -1 != e && e < b || -1 != f && f < b || -1 != g && g < b || -1 != h && h < b)
    }).each(function(){ ... });

Ici avec la partie :

Code:

    for(var a in balise) {
      var patternstr = "\\["+balise[a][0]+"\\](.*?)\\[\\/"+balise[a][0]+"\\]";
      var pattern = new RegExp(patternstr, 'g');
      var replacement = '<'+balise[a][1]+' class="'+balise[a][2]+'">$1</'+balise[a][1]+'>';
      pattern.test($(this).html()) && $(this).html($(this).html().replace(pattern, replacement))
    }

et le test de pattern, on :

-> teste le pattern 1 fois par post par remplacement,
-> lit 1 fois le html d'un post par post par remplacement si le pattern n'est pas trouvé ou 2 fois si il l'est,
-> remplace le pattern 1 fois par post par remplacement trouvé,
-> écrit 1 fois le html d'un post par post par remplacement trouvé,

sans le test de pattern on :

-> lit 1 fois le html d'un post par post par remplacement,
-> remplace le pattern 1 fois par post par remplacement,
-> écrit 1 fois le html d'un post par post par remplacement.

à moins que vous ayez chaque remplacement à chaque post du forum, la solution avec le test du pattern sera plus rapide et légère.

pour ce qui est du code :

Code:

 var content = $(this).html();
 var save_content = content;
 for (var a in balise) {
    var patternstr = "\\[" + balise[a][0] + "\\](.*?)\\[\\/" + balise[a][0] + "\\]";
    var pattern = new RegExp(patternstr, 'g');
    var replacement = '<' + balise[a][1] + ' class="' + balise[a][2] + '">$1</' + balise[a][1] + '>';
    pattern.test(content) && (content = content.replace(pattern, replacement))
 }
 if (content != save_content) $(this).html(content);

avec le pattern :

-> lit 1 fois le html d'un post par post,
-> teste le pattern 1 fois par post par remplacement,
-> remplace le pattern 1 fois par post par remplacement trouvé,
-> écrit 1 fois le html d'un post par post ayant au moins 1 remplacement trouvé.

sans le pattern :

-> lit 1 fois le html d'un post par post,
-> remplace le pattern 1 fois par post par remplacement,
-> écrit 1 fois le html d'un post par post ayant au moins 1 remplacement trouvé.

Les deux devraient environ pendre le même temps ( ce sera probablement une fraction de temps plus lent pour un petit post, et une fraction de temps plus rapide pour un très grand post ), c'est juste que je n'ai pas modifié par rapport au code précédent ( ou c'était vraiment utile ).

if (content != save_content) $(this).html(content);

save_content c'est le contenu de départ du message, content c'est le contenu qui a peut-être été modifié

la ligne permet si le contenu a été modifié, de le mettre comme nouveau contenu du post

on pourrait faire juste ceci sans le test :

Code:

$(this).html(content);

mais un test d'égalité comme ça sera toujours plus rapide qu'un $(this).html(content) ( ou this.innerHTML= content; ).

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou à faire un UP régulièrement ! A bientôt sur ForumActif

Sujet placé dans les archives afin de ne pas perdre les réponses des différents intervenants.


Cordialement.