Notatki Riu

BBcode to sposób formatowania wiadomości i treści stworzony głównie na potrzeby osób, które nie znają html’a. Wydaję mi się, że jest to jeden z lepszych sposobów udostępniania użytkownikowi możliwości modyfikacji treści, którą wysyła na naszą stronę. Odpowiednio zmodyfikowany sprawdza się również przy zaawansowanych edytorach. W poniższym tutorialu chciałbym pokazać jak zrobić bbcode oraz jak zaimplementować bbcode na swojej stronie.

Na początek krótka idea działania. Posiadasz na swojej stronie np. formularz komentowania newsów. Chciałbyś aby odwiedzający mogli zostawiać komentarze w których mogli by dodawać tekst, linki, emotki, obrazek, film z youtube etc. Poza tym skrypt ma być maksymalnie prosty, szybki i nie utrudniający użytkownikowi(ani tym bardziej administratorowi) życia :P

A więc do dzieła :). Na początek nadaj id dla pola tekstowego w którym będzie operował użytkownik

<textarea id="komentarz" name="komentarz"></textarea>

Do umieszczania bbcode w formularzu polecam biblioteką markItUp!. Z jej pomocą będziemy mogli otrzymać na swojej stronie bardzo prosty i przejrzysty edytor. Warto powiedzieć, że opiera się on o jQuery więc jego posiadanie nie będzie okupione ogromną ilością kodu do wczytania. Do podstawowej paczki markItUp! dołączamy paczkę z ustawieniami bbcode – zobacz demo.

Kod można dowolnie rozszerzać i modyfikować dołączając swoje znaczniki w plikach:

markitup/sets/bbcode/set.js
markitup/sets/bbcode/style.css

Aby wszystko zadziało musimy zainicjować działanie edytora dla naszego pola tekstowego z ustawieniami w/w pliku set.js

<script type="text/javascript">
$(document).ready(function(){
$('#komentarz').markItUp(mySettings);
});
</script>

Teraz nasze pole tekstowe powinno zamienić się w edytor z bbcode. Oczywiście sam edytor można dowolnie przerabiać np. po przeróbkach na wlc.pl wygląda on tak.

Po wysłaniu formularza z naszym tekstem i bbcode jest on zapisywany np. do bazy. Aby zamiast bbcode tekst był formatowany za pomocą html potrzebny jest parser bbcode (ściagnij). Z jego pomocą otrzymujemy w kodzie wynikowym mamy html, wygenerowany na podstawie bbcode.

Oczywiście można przeprowadzić parsowanie podczas zapisywania do bazy, co nie jest najgłupszym pomysłem przy dużej ilości danych. W wyniku tego nie dociążamy niepotrzebnymi operacjami przy pobieraniu danych z bazy.

W następnym tutorialu omówię jak za pomocą bbcode i znacznika [youtube] wstawiać filmy na stronę nie wykorzystując standardowego kodu z youtube.com.

« Poprzednia notatka: Kiro CMS 3.0 – premiera 15 grudnia 2009 » Następna notatka: FilesTube.com, czyli niezbędnik pirata, część 1

Możesz śledzić odpowiedzi w tym wątku za pomocą kanału RSS 2.0. Możesz skomentować, albo ustawić trackback z twojej własnej strony.

Brak komentarzy »

Dodaj komentarz