Jak stworzyć własny BBCode lub emotikony

Stosowanie BBCode jest pewnego rodzaju zabezpieczeniem przed wprowadzaniem przez użytkowników niechcianych, a nawet szkodliwych danych z formularzów. BBCode z jednej strony ma za zadanie ułatwienie formatowania tekstu użytkownikom, którzy nie znają HTML. Z drugiej strony może wymusić używanie wyłącznie dozwolonych przez skrypt znaczników HTML.

Najprostszym przykładem obrazującym niebezpieczeństwo niosące nieumiejętne zezwalanie na wprowadzanie HTML w formularzu jest przekierowanie na zewnętrzną stronę za pomocą JavaScript.

<script type="text/javascript">
	window.location.href = "http://www.blog.kmike.net/"
</script>

Uproszczony przykład (bez zapisywania i następnie pobierania z bazy danych) znajduje się pod tym adresem.

Rozwiązaniem jest tytułowy BBCode (albo funkcja htmlspecialchars – ale nie o tym jest wpis). Na początek trzeba przygotować tablicę, w której należy przypisać znacznikowi BBCode odpowiedni kod HTML. Przykład, dla kilku najważniejszych znaczników. Wedle potrzeb można bardzo łatwo i szybko powiększyć lub pomniejszyć tablicę.

$bbcode = array(
	'[b]' => '<b>', //pogrubienie początek
	'[/b]' => '</b>', //pogrubienie koniec
 
	'[u]' => '<u>', //podkreślenie początek
	'[/u]' => '</u>', //podkreślenie koniec
 
	'[i]' => '<i>', //kursywa początek
	'[/i]' => '</i>', //kursywa koniec
 
	'[s]' => '<s>', // przekreślenie początek
	'[/s]' => '</s>', // przekreślenie koniec
 
	'[size=1]' => '<span style="font-size: 16px;">', // czczionka rozmair 16px początek
	'[size=2]' => '<span style="font-size: 18px;">', // czczionka rozmair 18px początek
	'[size=3]' => '<span style="font-size: 20px;">', // czczionka rozmair 20px początek
	'[/size]' => '</span>', // kolor koniec
 
	'[color=red]' => '<span style="color: #d00000;">', // kolor czerwony początek
	'[color=green]' => '<span style="color: #50824f;">', // kolor zielony początek
	'[color=blue]' => '<span style="color: #0066ff;">', // kolor niebieski początek
	'[/color]' => '</span>', // kolor koniec
 
	'[url=' => '<a href="', // link początek
	']' => '" target="_blank">', // link domknięcie linku
	'[/url]' => '</a>', // link koniec
 
	'[img]' => '<img src="', // zdjęcie początek
	'[/img]' => '" />' // zdjęcie koniec
// Ostatni bez przecinka na końcu!
);

Mamy tablicę, teraz do zamiany BBCode na zrozumiały dla przeglądarek kod HTML wystarczy jedna funkcja strtr();. Strtr($string, $array); posiada dwa argumenty, pierwszy to ciąg znaków, drugi to tablica zmiennych do zamiany (w naszym przypadku tablica BBCode).

//Dla testu potrzebna będzie zmienna przechowująca kod BBCode
$convertString = '
[url=http://blog.kmike.net]Blog[/url]
[b]pogrubienie[/b]
[u]podkreślenie[/u]
[s]przekreślenie[/s]
[color=red]czerwony[/color]
[color=green]zielony[/color]
[color=blue]niebieski[/color]
[size=1]mała czcionka[/size]
[size=2]średnia czcionka[/size]
[size=3]duża czcionka[/size]
[i]kursywa[/i]
[color=red][b]czerwone pogrubienie[/b][/color]
[img]http://demo.kmike.net/img/bbcode.jpg[/img]';
 
//oraz wywołanie zmiennej
echo strtr($convertString, $bbcode); // tablica $bbcode została zdefiniowana wyżej.

Działanie powyższego BBCode można testować pod tym adresem.

Jeżeli zrozumiałeś zasadę działania BBCode, dodanie emotikonów nie sprawi Ci żadnego problemu. Zasada jest identyczna, należy stworzyć tablicę dla emotikonów i przypisać do znaków stosowne emotikony (obrazy). Poniższy przykład dla kilku dowolnych emotikonów (pobrane ze skryptu forum MyBB).

Idea rozwiązania została wytłumaczona powyżej więc przedstawię gotowy już kod.

//tablica emotikonów
$emots = array(
	':p' => '<img src="http://demo.kmike.net/img/emot/tongue.gif">', // Przypadek małej litery
	':P' => '<img src="http://demo.kmike.net/img/emot/tongue.gif">', // Przypadek dużej litery
	':huh:' => '<img src="http://demo.kmike.net/img/emot/huh.gif">',
	':(' => '<img src="http://demo.kmike.net/img/emot/sad.gif">',
	':D' => '<img src="http://demo.kmike.net/img/emot/biggrin.gif">', // Przypadek dużej litery
	':d' => '<img src="http://demo.kmike.net/img/emot/biggrin.gif">' // Przypadek małej litery
);
 
//zmienna zawierająca testowy ciąg znaków (emotikonów).
$convertEmots = '
:P
:D
:huh:
:(';
 
//Wyświetlanie zamienionych już emotikonów
echo strtr($convertEmots, $emots);

Działanie emotikonów można testować pod tym adresem.