[Résolu] WYSIBB - Balises bugs - Programmation - PHP

TheDarven Le 26 août 2016 à 03:32 (Édité le 25 janvier 2019 à 17:52)

Yo tout le monde ! Je suis en train de mettre en place un textarea me permettant de mettre en ligne de article. Pour cela j'ai mis en place un système de BBCode tout droit sortit de WysiBB (en suivant le tuto de PrimFX). Alors j'ai pas mal de soucis, enfin je ne sait pas si s'en est ^^

Je ne m'y connais pas bien et je ne sait donc pas quelles recherches il faut faire sur internet (j'ai tenté "code WYSIBB bug" "quote WYSIBB qui ne s'affiche pas" ect mais rien trouvé :/).

• En premier lieu mon quote d'affiche que un alinéa, est-ce normal ? (J'aimerai un quote identique à celui ici quoi 😋).
• Ensuite ma balise code .. ne fonctionne pas :/ Quand je sélectionne un texte, rien n'est sélectionné (je en peut pas écrire dedans) -- elle est invisible et n'est pas visible quand je regarde le code source BBCODE.
• De plus, dans mon passé, sur les forums où j'utilisais le BBCODE, or mis que le size n'était pas de 50, 100 ect (j'y ai réglé à ma sauce), je pouvais faire des variante genre size=24 donnait un texte de 24 px ect.. Je ne sais pas si c'est possible d'y mettre mais si c'est le cas, c'est juste parfait ^^
• Pour terminer, mes tableau sont fait de pointillées et je ne crois pas que cela est normal ^^

Je vous remercie d'avoir lu jusqu'ici. Vu que je vient à peine de découvrir l'insertion de BBCode dans un textarea, je vous demande donc d'être indulgent 😄

Sur ce à bientôt,
Tchous !

Profil introuvable Le 26 août 2016 à 03:52 (Édité le 26 août 2016 à 03:57)

.

TheDarven Le 26 août 2016 à 12:16

Je n'ai pas compris ton message 😋

Balatharas Le 26 août 2016 à 13:13

Hello petit Ananas ! Je suis a peu près sur de pouvoir t'aider pour quote, mais pas sur pour code. As-tu suivi le tuto de PrimL'Ananas pour parser du BBCode ?

TheDarven Le 26 août 2016 à 13:21

Je n'ai pas encore mis en place le parsage (j'ai tout de même regardé la vidéo) mais dans tout les cas je n'en ai pas besoin pour l'instant ^^ Tout ce que je veux c'est que le WYSIBB affiche correctement de base 😋 (je pense qu'on a besoin de css ^^). Merci de ton aide, je suis preneur !

Balatharas Le 26 août 2016 à 13:37 (Édité le 26 août 2016 à 13:40)

Tu es obligé de suivre le tuto de PrimFX pour parser le BBCode, ensuite il te suffit de rajouter ces lignes là ou tu parse ton BBCode:

$parser->addBBCode("quote", '<blockquote>{param}</blockquote>');   
$parser->addBBCode("code", '<pre class="codestyle">{param}</pre>', false, false, 1);

Ensuite, dans ton fichier CSS tu rajoute ça:

blockquote {
   border-color: #46A2D9;
   background: #E8E8E8;
   font-size: 14px;
     font-family: monospace;
   font-style: italic;
   margin-bottom: 15px;
   padding: 10px 20px;
   margin: 0 0 20px;
   border-left: 5px solid #46A2D9;
   display: block;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 40px;
   -webkit-margin-end: 40px;
}
.codestyle {
   display: block;
   padding: 9.5px;
   margin: 0 0 10px;
   font-size: 13px;
   line-height: 1.42857143;
   color: #333;
   word-break: break-all;
   word-wrap: break-word;
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   border-radius: 4px;
}

Le style blockquote ci dessus est celui utilisé sur ce site. Sinon j'en ai un autre:

blockquote {
  font: 14px/22px monospace, normal helvetica, sans-serif;
  font-style: italic;
  background-color: #EFEFEF;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
}

Expliqué simplement: le "parsement" transforme (quote) (avec les [ ] ) en <blockquote> et donc la propriété CSS que tu applique, s'éxécute.
Voilà 😋

TheDarven Le 26 août 2016 à 15:36

Avant de m’intéresser à ton code, je me suis penché de nouveau vers la vidéo de PrimFX sur le parsage, comme tu me l'avais conseillé. Le truc est que j'ai beaucoup de mal à comprendre sont code :

$parser = new JBBCode\Parser();
      $parser->addCodeDefinitionSet(new JBBCode\DefaultCodeDefinitionSet());
      $parser->parse($text);
       
      echo $parser->getAsHtml(); ?>

A la place de $text je doit mettre le texte que j'envoie avec un submit ?

Ensuite je ne crois pas que ton code me permet de voir le quote directement quand je l'écrit, sauf si je me trompe 😋

Balatharas Le 26 août 2016 à 16:11 (Édité le 26 août 2016 à 17:11)

Attention, pavé en approche.
Ces lignes de code tu n'a pas besoin de les comprendre sauf

$parser->parse($text);

En gros tout le parser, tu dois le mettre a l'endroit ou tu affiche ce que tu veux parser, et dans la ligne ci-dessus tu dois mettre la variable que tu veux parser dans les parenthèses. Exemple:
Tu poste un article. La variable de ta textarea s'appelle $contenu_article et tu veux parser ce contenu. Alors, à l'endroit précis ou tu veux faire apparaître le contenu, tu met ceci:

<?= $parser->parse($contenu_article); ?>

Tu peux aussi créer une variable plus courte:

$bbparser = $parser->parse($contenu_article);
//puis
echo $bbparser;

Voilà, si tu n'as pas tout compris, n'hésite surtout pas 😜
PS:

<?= $texte ?>

est un raccourci de:

<?php echo $texte; ?>

et tu n'as pas besoin de mettre de point-virgule a la fin de la variable.
Beignet, gentil Ananas.

TheDarven Le 26 août 2016 à 17:41

Alors j'ai avancé dans mon code, j'ai fait comme toi mais ça me met que à la ligne ou je déclare la variable $parser il y a un problème !

Voici mes codes - (vue)

       <div class="corp_page">
       <?php
          if(isset($article_texte))
          {
             $parser = new JBBCode\Parser();
            $parser->addCodeDefinitionSet(new JBBCode\DefaultCodeDefinitionSet());
          
            $text = "The default codes include: bold, italics, underlining, ";
            $text .= "links, color! and more.";
          
            $parser->parse($article_texte);
            echo $parser->getAsHtml();
          }
          ?>
          
         <div class="new_article">
            <h2>Ecrire un article</h2>
            <form method="POST" action="" id="form">
                <textarea id="wysibb" name="article_texte"></textarea>
             </form>
             <button type="submit" form="form" value="Submit" class="btn">Poster l'article</button>
          </div>
       </div>
    </body>
</html>

(contrôleur)

<?php include_once('../modele/bdd.php');
include_once('../modele/info_serv.php');
session_start();
$req = $bdd->prepare('SELECT * FROM membre_article WHERE pseudo = 😋seudo');
$req->bindValue(':pseudo', $_SESSION['pseudo']);
$req->execute();
$data = $req->fetch();
if (!isset($data['pseudo'])) // Acces OK !
{
   header('Location: index.php');
   die();
}
if(isset($_POST['article_texte']))
{
   $article_texte = nl2br($_POST['article_texte']);
}
   
include_once('../vue/nouveau.php');
?>

Balatharas Le 26 août 2016 à 18:04

Tu as suivi le tuto ? Il te manque ceci dans tes include:

require_once ('JBBCode/Parser.php');

Je suis gentil 😋 alors voilà le lien du dossier (.zip) JBBCode.
Ensuite,

echo $parser->getAsHtml();

comme sa fonction l'indique, il sert a montré le texte parsé, en texte brut, donc tu n'en a pas besoin. Ensuite tout ce code la tu dois le mettre a l'affichage de l'article, et non sur la page de rédaction.

TheDarven Le 26 août 2016 à 19:04 (Édité le 26 août 2016 à 19:10)

Tu vas rire mais j'avais en fait ajouté la partie de parsage par dessus l'include qui s'était donc supprime xD Le code est le quote fonctionne niquel ! J'ai tout de même d'autre "soucis" ^^ Déjà est-il possible d'afficher le rendu de la balise code directement ? De plus pourquoi quand je met ,spoiler, il ne s'affiche pas ? Et pour terminer peut on faire en sorte que lorsqu'on met [size=x] sa applique la taille xpx à l'image ?

Merci de ton aide très précieuse, j'avoue que ça me fait bizarre de me faire aider par une personne plus jeune que moi mais ça fait plaisir de voir que nous avons la même passion pour le codage 😄

Balatharas Le 26 août 2016 à 19:35

Déjà est-il possible d'afficher le rendu de la balise code directement ?

Dans la textarea ?

De plus pourquoi quand je met ,spoiler, il ne s'affiche pas ?

Ca je ne sais pas, explique toi très en détail:

le bouton ne s'affiche pas dans l'éditeur ?
le bouton marche, mais rien ne se passe ?

Si c'est la deuxième solution, alors met ceci dans ton parser:

$parser->addBBCode("spoiler", '<div class="spoiler (autre class si il y a)">{param}</div>');

Et je te laisse chercher le css. S'il y a plusieurs class rajoute les en laissant spoiler.

Et pour terminer peut on faire en sorte que lorsqu'on met [size=x] sa applique la taille xpx à l'image ?

Alors la je pense a quelque chose mais je n'ai pas testé:

$parser->addBBCode("size", '<div style="font-size:{option}px">{param}</div>');

De rien, moi aussi c'est vrai 😜

TheDarven Le 26 août 2016 à 19:46

Dans la textarea ?

Oui car dans le textarea je prend selectionne un texte et que je clique sur code rien ne change en affichage. De plus quand je fait un retour à la ligne et que je désélectionne code les balises codes se suppriment (je dois donc modifier à la main dans l'éditeur bbcode :/)

Ca je ne sais pas, explique toi très en détail:
le bouton ne s'affiche pas dans l'éditeur ?
le bouton marche, mais rien ne se passe ?

Le bouton ne s'affiche pas dans l'éditeur :/

Alors la je pense a quelque chose mais je n'ai pas testé:

Ca ne fonctionne pas chez moi 😋 Je doit peut-être supprimer se qui se trouve en rapport à la taille dans le javascript ?

J'ai deux autres balises qui ne sont pas traité lors du parsage : vidéo et tableau ^^

Au passage je t'ai ajouté sur skype, je ne sais pas si tu as vu ou si tu as refusé ou je sais quoi 😋

Balatharas Le 26 août 2016 à 20:03

Ça c'est des problèmes de l'éditeur.
Il va falloir te renseigner je n'en sais pas plus...
Désolé pour la taille je ne sais pas du tout ^^
D'autre problème de l'éditeur, chez moi ça fonctionne..

Cette fois je ne peux pas trop t'aider désolé :/
J'accepterai quand je pourrai 😋

Balatharas Le 26 août 2016 à 20:09

Ah ! Essaie ceci pour vidéo, rajoute une virgule après la dernière accolade dans ton script de l'éditeur, puis rajoute ceci:

video: {
                  title: 'Insérer une vidéo',
                  buttonHTML: '<span class="fonticon ve-tlb-video1">\uE008</span>',
                  modal: {
                     title: 'Insérer une vidéo',
                     width: "500px",
                     tabs: [
                        {
                           title: 'Insérer une vidéo',
                           input: [
                              {param: "SRC",title:'Entrez l\'URL de la vidéo YouTube:'}
                           ]
                        }
                     ],
                     onSubmit: function(cmd,opt,queryState) {
                        var url = this.$modal.find('input[name="SRC"]').val();
                        if (url) {
                           url = url.replace(/^\s+/,"").replace(/\s+$/,"");
                        }
                        var a;
                        if (url.indexOf("youtu.be")!=-1) {
                           a = url.match(/^http[s]*:\/\/youtu\.be\/([a-z0-9_-]+)/i);
                        }else{
                           a = url.match(/^http[s]*:\/\/www\.youtube\.com\/watch\?.*?v=([a-z0-9_-]+)/i);
                        }
                        if (a && a.length==2) {
                           var code = a[1];
                           this.insertAtCursor(this.getCodeByCommand(cmd,{src:code}));
                        }
                        this.closeModal();
                        this.updateUI();
                        return false;
                     }
                  },
                  transform: {
                     '<iframe src="http://www.youtube.com/embed/{SRC}" width="640" height="480" frameborder="0"></iframe>':'[video]{SRC}[/video]'
                  }
               }

TheDarven Le 26 août 2016 à 20:50

Malheureusement ça ne fonctionne pas :/

Balatharas Le 26 août 2016 à 21:02

Montre moi ton script Wysibb

TheDarven Le 26 août 2016 à 23:41 (Édité le 27 août 2016 à 01:45)

Voici mon script :
http://pastebin.com/SBhrXL4e

Je pense très honnêtement passer sous SCEditor car celui-ci contient tout autant, si ce n'est plus de possibilités qui fonctionnent 😋

TheDarven Le 27 août 2016 à 01:46 (Édité le 27 août 2016 à 02:48)

(j'ai fais un test de balise mais je peux pas supp. ce message désolé :x)

Balatharas Le 27 août 2016 à 11:13

Hum normalement le script de ton éditeur doit ressembler à ça:

<script>
   var $j=jQuery.noConflict();
   $j(function() {
     var optionsWbb = {
      buttons: "bold,italic,underline,justifycenter,|,img,link,video,smilebox,|,bullist,numlist,|,code,quote,|,fontcolor,fontsize,fontfamily",
      lang: "fr",
      allButtons: {               
           fontfamily: {
              title: 'Police',                 
              type: 'select',
              options: [
               {title: "Arial",exvalue: "Arial"},
               {title: "Comic Sans MS",exvalue: "Comic Sans MS"},
               {title: "Courier New",exvalue: "Courier New"},
               {title: "Georgia",exvalue: "Georgia"},
               {title: "Lucida Sans Unicode",exvalue: "Lucida Sans Unicode"},
               {title: "Tahoma",exvalue: "Tahoma"},
               {title: "Times New Roman",exvalue: "Times New Roman"},
               {title: "Trebuchet MS",exvalue: "Trebuchet MS"},
               {title: "Verdana",exvalue: "Verdana"}
            ],
                transform: {
                 '<font face="{FONT}">{SELTEXT}</font>':'<font={FONT}>{SELTEXT}</font>'
              }
           },
          video: {
            title: 'Insérer une vidéo',
            buttonHTML: '<span class="fonticon ve-tlb-video1">\uE008</span>',
            modal: {
               title: 'Insérer une vidéo',
               width: "500px",
               tabs: [
                  {
                     title: 'Insérer une vidéo',
                     input: [
                        {param: "SRC",title:'Entrez l\'URL de la vidéo YouTube:'}
                     ]
                  }
               ],
               onSubmit: function(cmd,opt,queryState) {
                  var url = this.$modal.find('input[name="SRC"]').val();
                  if (url) {
                     url = url.replace(/^\s+/,"").replace(/\s+$/,"");
                  }
                  var a;
                  if (url.indexOf("youtu.be")!=-1) {
                     a = url.match(/^http[s]*:\/\/youtu\.be\/([a-z0-9_-]+)/i);
                  }else{
                     a = url.match(/^http[s]*:\/\/www\.youtube\.com\/watch\?.*?v=([a-z0-9_-]+)/i);
                  }
                  if (a && a.length==2) {
                     var code = a[1];
                     this.insertAtCursor(this.getCodeByCommand(cmd,{src:code}));
                  }
                  this.closeModal();
                  this.updateUI();
                  return false;
               }
            },
            transform: {
               '<iframe src="http://www.youtube.com/embed/{SRC}" width="640" height="480" frameborder="0"></iframe>':'[video]{SRC}[/video]'
            }
         }
      }
     }
     $j("#wysibb").wysibb(optionsWbb);
   })
</script>

TheDarven Le 27 août 2016 à 12:25

Autant pour moi 😀

<script>
         $(document).ready(function() {
         var wbbOpt = {
         buttons: "bold,italic,underline,|,img,link,|,code,quote,spoiler,|,justifycenter,|,fontcolor,fontfamily,fontsize,|,",
         lang: "fr",
         hotkeys: false, //isable hotkeys (the native browser combinations will work)
           showHotkeys: false //Hide combination in the tooltip on hover.
         }
         $("#wysibb").wysibb(wbbOpt);
         });
         </script>

Balatharas Le 27 août 2016 à 13:19

Après lang: "fr", met ceci:

allButtons: {
   video: {
      title: 'Insérer une vidéo',
      buttonHTML: '<span class="fonticon ve-tlb-video1">\uE008</span>',
      modal: {
         title: 'Insérer une vidéo',
         width: "500px",
         tabs: [
            {
               title: 'Insérer une vidéo',
               input: [
                  {param: "SRC",title:'Entrez l\'URL de la vidéo YouTube:'}
               ]
            }
         ],
         onSubmit: function(cmd,opt,queryState) {
            var url = this.$modal.find('input[name="SRC"]').val();
            if (url) {
               url = url.replace(/^\s+/,"").replace(/\s+$/,"");
            }
            var a;
            if (url.indexOf("youtu.be")!=-1) {
               a = url.match(/^http[s]*:\/\/youtu\.be\/([a-z0-9_-]+)/i);
            }else{
               a = url.match(/^http[s]*:\/\/www\.youtube\.com\/watch\?.*?v=([a-z0-9_-]+)/i);
            }
            if (a && a.length==2) {
               var code = a[1];
               this.insertAtCursor(this.getCodeByCommand(cmd,{src:code}));
            }
            this.closeModal();
            this.updateUI();
            return false;
         }
      },
      transform: {
         '<iframe src="http://www.youtube.com/embed/{SRC}" width="640" height="480" frameborder="0"></iframe>':'[video]{SRC}[/video]'
      }
   }
}

Tiens moi au courant 😋

TheDarven Le 27 août 2016 à 13:49

J'ai mis une virgule après la dernière accolade car tu l'avais oublié 😋

Voici ce que j'obtient après le parsage :

[video]zPPNw0RU0bc[/video]

Balatharas Le 27 août 2016 à 19:13

Tu n'as pas besoin de virgule, tant qu'il n'y a pas autre chose après ^^
C'est bien, donc le bouton fonctionne. Maintenant met ceci:

$parser->addBBCode("video", '<iframe src="https://www.youtube.com/embed/{param}" width="440" height="360" frameborder="0"></iframe>');

Avec code et quote.

TheDarven Le 27 août 2016 à 19:33

Et bien ça fonctionne très bien 😀 Il reste le problème du spoiler mais je vais faire sans ! Je te remercie beaucoup de ton aide, je suis même surpris de ton niveau 😋 J'espère qu'on se reverra très bientôt (sur skype si tu m'acceptes xD) 😀

WYSIBB - Balises bugs

Échange

Articles / Vidéos

Ressources