Tutoriel Vidéo PHP : BBCode

Dans ce tutoriel vidéo vous apprendrez, dans un premier temps, à créer un formulaire permettant d'écrire du BBCode avec le module jQuery MarkItUp.

Dans un second temps vous verrez comment utiliser les expressions régulières pour générer le code HTML à partir d'un texte en BBCode.


Télécharger la vidéo
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

Générer un extrait en PHP

Générer un extrait en PHP
14m

Dans ce nouveau tutoriel PHP, nous allons voir ensemble comment générer...

Utilisation du Foreach, Implode, Explode

Utilisation du Foreach, Implode, Explode
7m

Encore du php, et trois "outils" indispensables, le foreach,...

35 commentaires
Ajouter un commentaire

inconnu Il y a 2 mois Répondre

Merci pour ce tuto , même si tu ne réponds pratiquement jamais

j'aimerai te poser la question de savoir pourquoi sur ie sa ne marche pas?
c'est le cas pour moi si tu peux m'aider ce serait super(j'ai ie 9)

encore merci pour ce tuto

Grafikart Il y a 2 mois - Répondre

Je ne répond jamais aux commentaires, il y à le forum pour les questions

.LuD. Il y a 5 mois Répondre

Merci pour ces tutos,
je me régale à les suivre (et éditer en même temps ! )

Bonne continuation !

Strap Il y a 6 mois Répondre

Bonjour,
Un grand merci pour ce tuto !

Mais j'ai un petit soucis, j'ai voulu ajouter le bbcode a mon systeme de news (grafikart) et donc j’insère le script dans mon fichier edit.php.. A ce moment la tout marche mais quand j'envoi, sur ma news s'affiche [b]exemple[/b] au lieu du texte en gras..
Merci de votre aide

didouchy Il y a 6 mois Répondre

Bonjour à tous !

Tout d'abord merci à Grafikart pour ce tuto !

J'ai trouver comment ajouter une vidéo youtube pour ceux qui le souhaite.

C'est très simple je vous explique comment faire:

Dans markitup/sets/default/set.js
Sur une nouvelle ligne ( à l'emplacement souhaité )
copier et coller ceci:

{name:'vidéo youtube', className:'clean', replaceWith:'<iframe width="425" height="349" src="http://www.youtube.com/embed/ [![Code vidéo:NoxPn5q9JNA]!]" frameborder="0" allowfullscreen></iframe>'},

Explication:
replaceWith que j'ai reprit pour le système d'image
<iframe> c'est le code iframe de youtue par defaut quand ont veut ajouter cette vidéo sur une page html ou autre.
J'ai simplement reprit je code et supprimer le code de la vidéo qui ce trouve après embed/ et j'y est ajouter [![Code vidéo:NoxPn5q9JNA]!] Pour l'ajout du code de la vidéo youtube

Voilà, en espérant en n'avoir aider 1 ou 2 ^^
Une petit aperçu
http://data.imagup.com/10/1126018886.jpg

Gensou Il y a 8 mois Répondre

Pour les fainéants comme moi qui préfèrent insérer qu'une seule balise sur plusieurs lignes c'est à dire avec un retour chariot compris dans votre texte:

exemple :

[code]ligne 1
ligne 2
ligne 3[/code]

Dans ce cas, à modifier dans votre regex
'\[code\]((.+\n?)+)\[\/code\]' =>'<code>$1</code>'

Gensou Il y a 8 mois Répondre

Ahh les regex, merci pour le site très utile pour les générer que je ne connaissais pas, très pratique

robin850 Il y a 12 mois Répondre

Salut,

Super tutoriel cependant est ce que tu pourrais nous guider sur la réalisation d'un colorateur syntaxique. Par exemple, pour Grafikart lequel utilises-tu s'il te plaît ?

Merci d'avance.

Cordialement, Robin.

flodu59600 Il y a 1 an Répondre

salut,

j'ai un problème!

j'ai fait comme dans le tutoriel mais rien n'y fait, le texte ne se converti pas ...

totalgaara Il y a 1 an Répondre

Un enorme merci pour vos tutoriel bien utilise, j'était effectivement bloquer avec markitup, c'est résolu :p

Vous êtes gegnial :p

Tchicone Il y a 1 an Répondre

bon tuto Merci .

mdr le "chien.com" fallai y penser

Legendary Il y a 1 an Répondre

Merci pour ce tuto, petite question, j'aimerai l'intégrer au tuto création de news(php de grafikart), l'exemple marche bien quand c'est sur la même page cad
<form method="post" action="index.php"> mais dés que je veux changer comme dans le tuto création de news par action="creer.php, ca ne marche plus, dois-je placer le bout de code php ailleurs ? je l'ai mis dans creer.php et voir.php et ça à pas l'air d'être ça... merci de votre aide

Legendary Il y a 1 an - Répondre

problème résolu, dans mon creer.php, j'avais garder if(!empty($_POST)){

Diablo57 Il y a 1 an Répondre

javais juste une question ou niveau de la sécurité, en peut enpecher un hack ?

mtrima Il y a 1 an Répondre

est-ce vcious pouvez nous conseiller un wysiwyg bbcode, j'en ai trouvé sur le net mais je sais pas lequel choisir, sinon comment en créer un se basant sur MarkItUp

Air. Il y a 1 an Répondre

Youhou très bien expliqué, simple, bref, cool, même si ce n'est vraiment pas ce que je cherche. Bonne continuation (:

Thom@as Il y a 1 an Répondre

Juste ENORME ! Merci beaucoup pour tes tutos toujours bien éxpliquer !

Benoit Il y a 1 an Répondre

Bonjour, j'ai une question qui n'a peut être pas beaucoup a voir avec le tutoriel, la première image de ta vidéo montre surement un espace d'administration et les commentaires (surement) on une couleur de fond qui s'alterne, ça fait un moment que je cherche a faire cet effet donc si tu pouvais m'orienter vers un autre tutoriel pour réaliser cet effet ce serait gentil ou même me mettre sur la piste, je crois que c'est en javascript. Merci et il est super ce tutoriel

red-ace Il y a 2 ans Répondre

pour le BBCode, ils proposent un parser: http://markitup.jaysalvat.com/downloads/demo.php?id=markupsets/bbcode

PhiSyX Il y a 2 ans Répondre

On pouvait aussi le faire avec str_replace() (On m'a dit d'éviter les regex si on peut utiliser le str, plus rapide :x) :p

Cruwp Il y a 2 ans Répondre

Pas mal, j'ai ajouté des balises tel que la couleur et le center.
Mais il y a un inconvénient la balise ne s'affiche pas sur plusieurs lignes...

radah Il y a 2 ans Répondre

Super tuto, mtn le BBcode claire est nette Bravo

Eric Il y a 2 ans Répondre

Hell O,
Comment on fait sur netbeans pour compléter un mot en appuyant sur "TAB" au lieu de enter, et aussi pour gérer l'autocompletion des méthodes etc dans les fichier ou on n'instancie pas une class mais où on a déjà inclue un fichier ou la variable est instancier.

Alex-D Il y a 2 ans Répondre

Bonjour,
techniquement, est-il préférable de parser puis d'enregistrer dans la base de données, ou d'enregistrer sous forme BBcode (ou autre) et de parser à chaque affichage ?

creataddict Il y a 2 ans

Très bonne question, je pense que tout dépend si tu doit pouvoir éditer ou pas je pense

Alex-D Il y a 2 ans

Ah oui, effectivement pour l'édition c'est plus pratique de le garder brut...

stitox Il y a 2 mois - Répondre

N'est il pas préférable d'utiliser le serialize pour l'enregistrement en base ?

creataddict Il y a 2 ans Répondre

Bonjour,

Merci pour le tuto qui est très bien comme toujours.

J'ai malgré tout une question, pourquoi montrer les modifications du set.js pour qu'il fasse du bbcode alors que si on prend l'archive bbcode http://markitup.jaysalvat.com/downloads/ c'est déjà fait ?

Librement.

Badbart Il y a 2 ans - Répondre

Pour apprendre à créé ses propres balise, si tu télécharges le truc tout fait tu apprend rien, alors que c'est le but de la video. C'est pas un tuto spécial bbcode + markitup.
Un pti rappel sur les expressions régulière en plus ça fait pas de mal.

valentin45000 Il y a 2 ans Répondre

@elscorto : Oui merci j'ai trouver un tutoriel complémentaire pour l'intégré, merci ^^

Nicolasi2304 Il y a 2 ans Répondre

Super merci encore une fois

elscorto Il y a 2 ans Répondre

Pas encore vu mais quelle rapidité, quelques jour après le système de questions.

valentin45000 : regarde du côté de geshi

JPopLive Il y a 2 ans Répondre

Super tuto sur le BBCode, tu as vraiment bien défini ses composantes!

valentin45000 Il y a 2 ans Répondre

Pil poil se que je voulait ^^
Par contre comment on fait pour coloré du code ? xD

Merci d'avance.

fantoche Il y a 2 ans Répondre

Merci

Corentin Il y a 2 ans Répondre

Magnifique tuto ^^

neodc Il y a 2 ans Répondre

c'est moi ou il propose de télécharger directement un set pour BBcode et un parsers ?
source http://markitup.jaysalvat.com/downloads/

cerise Il y a 2 ans Répondre

Merci

OverSpeed Il y a 2 ans Répondre

Je plussoie tagcash, il est excellent ce tuto

tagcash Il y a 2 ans Répondre

quelle rapidité il est exellent

Badbart Il y a 2 ans Répondre

Cool, demander il y a quelque jours, déjà en ligne, sa va plaire a des gens tout ça

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.