TUTO JS - INTÉGRATION D'UN ÉDITEUR WYSIWYG

PrimFX PrimFX Le 13 mars 2016

Avoir une textarea, c'est pas mal... Mais avoir un éditeur style Word à la place, c'est pas mieux ? 😛 Je vous montre dans un prochain tuto comment traiter le BBCode généré en PHP ;-)

<link rel="stylesheet" href="css/wbbtheme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.wysibb.min.js"></script>
<script src="js/jquery.wysibb.fr.js"></script>
<script>
$(function() {
  var optionsWbb = {
   buttons: "bold,italic,underline,|,justifycenter,|,img,link,|,code,quote,monbouton",
   lang: "fr",
   allButtons: {
       monbouton: {
         title: 'Bouton Custom',
         buttonText: 'MON BOUTON',
         transform: {
           '<div class="maclasscustom">{SELTEXT}</div>':'[monbouton]{SELTEXT}[/monbouton]'
         }
       }
   }
  }
  $("#wysibb").wysibb(optionsWbb);
})
</script>
  • Et quelque part dans le <body> :
<textarea id="wysibb"></textarea>
Si vous avez des questions, je vous laisse les poser dans les commentaires ;-)

A propos de l'auteur

PrimFX
PrimFX

Salut tout le monde ! Je m'appelle Boris, j'ai 20 ans et je suis passionné d'informatique et de technologie. Je partage cette passion à travers mes vidéos sur YouTube et les articles de ce site internet. J'ai également co-fondé en 2019 l'entreprise de services informatique Single Quote et je suis en parallèle étudiant (en informatique bien sur) :-)

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 9

  • ouija Le 25 novembre, à 17:22 | Répondre

    Salut
    J'ai vraiment besoin d'aide
    Moi le retour a la ligne ne marche pas donc ...
    Aidez moi stp

  • Balatharas Le 18 juin, à 16:02 | Répondre

    @coucougael94 Euh ton code est bien mais en fait cela n'insère qu'un smiley :/

  • Balatharas Le 18 juin, à 15:57 | Répondre

    Merci pour ton tuto :D

  • salutlacompagnie Le 21 mai, à 17:35 | Répondre

    Bonjour ,
    Il n'y a pas de possibilité de retour a la ligne automatiquement?

  • Mio Le 19 avril, à 22:30 | Répondre

    @coucougael94 Merci pour ta réponse.

  • coucougael94 Le 19 avril, à 12:14 | Répondre

    @Spayl Je pense que si ton smiley est en background d'une div avec un espace, cela serais possible. Sinon, tu prend juste une image normal. Tien, je t'ai fais un code spécialement pour toi:
    Au faite, il suffisait d'enlever le "{SELTEXT}" qui indiqué a quel endroit appliquer le style.
    Merci a primFx !
    $(function() {
    var wbbOpt = {
    buttons: "bold,italic,underline,|,img,link,|,code,quote,monbouton",
    lang: "fr",

    allButtons: {
    code: {
    hotkey: "ctrl+shift+3", //Add hotkey
    transform: {
    '<div class="mycode"><div class="codetop">Code:</div><div class="codemain">{SELTEXT}</div></div>':'[code]{SELTEXT}[/code]'
    }
    },
    monbouton: {
    title: 'Inserer un smiley',
    buttonText: 'smiley',
    transform: {
    '<img src="smiley.png">':'[monbouton]'
    }
    }
    }
    }
    $("#wysibb").wysibb(wbbOpt);
    })

  • PrimFX Le 19 mars, à 13:53 | Répondre

    @Spayl Yo ! Ouaip je ferai un petit tuto là-dessus ;-)
    @Clouder Je sais je sais :p Mais bon, vu que j'ai l'habitude d'utiliser du BBCode, ben je fais avec ça :D

  • Clouder Le 18 mars, à 11:36 | Répondre

    @PrimFX tu pourrais utiliser le Markdown si tu souhaites ! :) c'est aussi bien que ce que tu utilises :p

  • Mio Le 16 mars, à 21:40 | Répondre

    Salut,
    PrimFx pourrait tu faire un tuto pour mettre des smyley. C'est une des seules partie de la doc que je n'est pas compris.
    Merci d'avance