Formatowanie BBCode

W dzisiejszym tutorialu pokażę jak wykonać prosty mechanizm, który będzie używał znaczników BBCode. Funkcjonalność tą można wykorzystać do własnych skryptów, takich jak shoutbox, księga gości czy też systemu komentarzy.

Jak cały mechanizm będzie działał? Otóż będzie zawierał funkcję preg_replace(), która korzysta z wyrażeń regularnych. Posłuży ona do zamiany kodu BBCode na znaki HTML.

Zacznijmy od formularza z buttonami:

<script src="script.js"></script>
<form action="?" method="post">
   <div class="options">
   <input type="button" value="b" onclick="wstaw('[b]','[/b]')">
   <input type="button" value="i" onclick="wstaw('[i]','[/i]')">
   <input type="button" value="u" onclick="wstaw('[u]','[/u]')">
   <input type="button" value="s" onclick="wstaw('[s]','[/s]')">
   <input type="button" value="link" onclick="wstaw('[url]','[/url]')">
   <input type="button" value="obrazek" onclick="wstaw('[img]','[/img]')">
   <input type="button" value="cytat" onclick="wstaw('[quote]','[/quote]')">
   <input type="button" value="kod" onclick="wstaw('[code]','[/code]')">
   </div>
   <label>Treść</label>
   <textarea id="content_input" name="content"></textarea>
   <br/>
   <input type="submit" name="submit" value="Wyślij">
</form>

Zwróćmy uwagę, że na początku kodu jest ładowany plik JavaScript – script.js. Zawiera on funkcję wstaw(), która jest wykorzystywana w atrybutach onclick przycisków. Jak można się domyślić, funkcja ta jest odpowiedzialna za wstawianie kodów BBCode do pola textarea. Plik z funkcją prezentuje się następująco:

function wstaw(start_tag,stop_tag){
   var okno = document.getElementById("content_input");
   if(!okno.setSelectionRange) {
      var selected = document.selection.createRange().text; 
      if(selected.length <= 0) {
         okno.value +=start_tag + stop_tag;
      } else {
         document.selection.createRange().text = start_tag + selected + stop_tag;
      }
   } else {
      var pretext = okno.value.substring(0, okno.selectionStart);
      var codetext = start_tag + okno.value.substring(okno.selectionStart,
      okno.selectionEnd) + stop_tag;
      var posttext = okno.value.substring(okno.selectionEnd, okno.value.length)
      if(codetext == start_tag + stop_tag) {
         okno.value +=start_tag + stop_tag;
      } else {
         okno.value = pretext + codetext + posttext;
      }
   }
   okno.focus ();
}

Przyszedł czas na PHP. Do zamiany znaków stworzymy specjalną funkcję:

function bbcode($text) {
   $text = preg_replace("#\[b\](.*?)\[/b\]#si",'<b>\\1</b>',$text);
   $text = preg_replace("#\[i\](.*?)\[/i\]#si",'<i>\\1</i>',$text);
   $text = preg_replace("#\[u\](.*?)\[/u\]#si",'<u>\\1</u>',$text);
   $text = preg_replace("#\[s\](.*?)\[/s\]#si",'<s>\\1</s>',$text);
   $text = preg_replace("#\[img\](.*?)\[/img\]#si",'<img src="\\1" />',$text);
   $text = preg_replace("#\[url\](.*?)\[/url\]#si", "<a href=\"http://\\1\">\\1</A>", $text);
   $text = preg_replace("#\[url=(.*?)\](.*?)\[/url\]#si", "<a href=\"http://\\1\">\\2</A>", $text);
   $text = preg_replace("#\[code\](.*?)\[/code\]#si","<pre>\\1</pre>",$text);
   $text = preg_replace("#\[quote\](.*?)\[/quote\]#si","<blockquote>\\1</blockquote>",$text);
 
   return $text;
}

Teraz, gdy będziemy chcieli wyświetlić np. wpis z księgi gości, który będzie zawierał znaki BBCode, wystarczy użyć powyższej funkcji. Prosty przykład poniżej:

$string = "Ta informacja jest [u]bardzo ważna[/u]! Przeczytaj ją [b]uważnie[/b]!
echo bbcode($string);
 
//Zwróci: Ta informacja jest <u>bardzo ważna</u>! Przeczytaj ją <b>uważnie</b>!

Powiązane Wpisy

CSS3

Wiele obrazów w tle...

php

Jak wyodrębnić cyfry ze...

Top Facebook Shared...

Komentarze

  1. Blow dnia 10 listopada 2012 o 15:51 napisał(a):

    Cześć, możesz wstawić download z spakowanymi plikami?

  2. @Blow

    Tak ciężko otworzyć Ci notepad’a i zapisać jako php ?

    @AutorStrony

    Dzięki za skrypcik 😉

  3. Super 😉

  4. Dasz paczkę?

  5. Rachman dnia 25 marca 2013 o 00:00 napisał(a):

    Super 🙂 Właśnie szukam takiego czegoś. Mam nadzieję że wszystkie przeglądarki to trawią 🙂 Dzięki przetestujemy.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *