Créer des BBCodes

[Flaura]

Bonjour, 

est-il possible de créer un nouveau BBCode (en partant du html) et de le mettre sur l'éditeur quand on poste un message sur le forum?

[Flaura]

UP, merci de répondre.

[Flaura]

UP!

[FANCH 56]

Bonjour

Tape BBcode dans les champs de recherches de FA, et tu trouveras peut-être la réponse.

[Flaura]

Voici tout ce que j'ai trouvé: https://forum.forumactif.com/t361810-ajouter-son-propre-bbcode
Et il se trouve que j'ai pas bien compris =S

[Flaura]

UP

[Flaura]

UP...

[Flaura]

UP!

[Flaura]

UP, répondez-moi...

[[Nihil]]

Voici tout ce que j'ai trouvé: https://forum.forumactif.com/t361810-ajouter-son-propre-bbcode
Et il se trouve que j'ai pas bien compris =S

Qu'est ce que tu entends par "Je n'ai pas compris" ^^ ?
Tu as essayé et ça ne marche pas ?

[Flaura]

Je n'ai pas compris ce dont ils parlaient...

[[Nihil]]

Ok, as tu un exemple de ce que tu voudrais mettre en place comme bbcode remplacé par du html ?

[Flaura]

Un cadre noir avec une bordure verte claire avec l'écriture à l'intérieur en blanc.

[[Nihil]]

En fait, je voulais savoir si tu pouvais me fournir :

Le bbcode à chercher par exemple :
Ici "Message d'exemple" c'est le contenu.

Code:

[avertissement]Message d'exemple[/avertissement]

Le HTML par quoi il faut faudra remplacer, on peut imaginer ça par exemple :

Code:

<div class="avertissement">
    <h2>Avertissement</h2>
    <p>Message d'exemple</p>
</div>

Comme ça on va l'adapter directement à ton code

[Flaura]

Ah,
je m'excuse mais je ne m'y connais pas trop en HTML... Cependant, voici le message d'exemple:

Code:

[explorateurs][/explorateurs]

[[Nihil]]

Ok, donc le message qui nous intéresse c'est celui ci

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)
  })
});

Il y a toute partie que tu peux ne pas prendre en compte :

Code:

      // 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()+" [[---");
      });

La partie avec le bbcode est ici :

Code:

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

Le bbcode c'est ça :

Code:

[gal][/gal]

Et ensuite en HTML est remplacé par :

Code:

var replacement = '<div class="gal">$1</div>';

Toi tu voudrais ceci :

Code:

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

Le code javascript total devrait donc donner :

Code:

$(function() {
 
  var pattern = /\[explorateurs\](.*?)\[\/explorateurs\]/g;
  var replacement = '<div class="explorateurs">$1</explorateurs>';
 
  $(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))
      });
    }, 600)
  })
});

Ensuite dans le CSS tu n'as plus qu'à mettre le style que tu veux :

une bordure verte claire avec l'écriture à l'intérieur en blanc

Code:

.explorateurs {
    border: 1px solid #2ecc71; /* bordure verte */
    color: white; /* texte en blanc */
}

[Flaura]

Merci, mais ça ne marche pas.

[[Nihil]]

"Ca ne marche pas" c'est un peu vague pour trouver le problème

Pourrait tu fournir le lien d'un sujet de ton où tu mets ceci en place ? Il faut que ce sujet soit visible pour les invités

[Flaura]

Ah non, c'est bon, mais quand je fais la prévisualisation ça ne marchait pas, en fait. Voilà le lien du sujet: http://pokemondracaufeu.forumactif.com/t6-topic
le problème c'est que ça met un peu de temps à s'afficher, on a le temps de voir quel était le BBCode, y a-t-il un moyen de régler ça?

[[Nihil]]

Pour les endroits où ce javascript est activé, tu as coché quoi comme pages ?

Pour le temps que cela met, il suffit de lire intégralité du message d'Ea

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.

Tu peux remplacer par ceci normalement :

Code:

$(function() {
 
  var pattern = /\[explorateurs\](.*?)\[\/explorateurs\]/g;
  var replacement = '<div class="explorateurs">$1</explorateurs>';
 
  $("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))
  });

});

[Flaura]

Merci ça s'affiche correctement ^^. Tant que j'y suis, comment insérer un bouton sur l'éditeur et quand on clique dessus, on a le BBCode créé ?

[[Nihil]]

Alors j'ai encore jamais rajouté de bouton dans l'éditeur même si je vois le principe je pense x)
Là j'ai pas encore le temps de me pencher dessus, donc pense à upper régulièrement au cas où, comme ça quelqu'un répondra surement avant moi :p

[Self]

Bonjour,

Ea dans sa première réponse l'a expliqué sur ce sujet : https://forum.forumactif.com/t353027-demande-code-pour-ajout-de-bouton
Pour vous j'imagine que ça donnerait quelque chose comme ça :

Code:

$(function(){$(function(){
   $('<a class="sceditor-button sceditor-button-exp" unselectable="on" title="explorateurs"><div unselectable="on" style="background-image:url(http://2img.net/i/fa//i/smiles/star3.png)">Explorateurs</div></a>').insertAfter('.sceditor-button-fahide').click(function(){
      $('#text_editor_textarea').sceditor("instance").insertText("[explorateurs]","[/explorateurs]");
   });      
})});

[[Nihil]]

Merci pour cette intervention Self'

Du coup j'vais aller jeter un coup d'oeil à la doc de sceditor moi

[Flaura]

Merci, c'est bon