BB-kód értelmezése

Ebben a tutorialban bemutatok egy BB kód értelmezőt, valamint annak a használatát. Remélem hasznos lesz számotokra. A kódot csak kimásolod innen egy fájlba és gyönyörködsz az eredményben :D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php function bb($message){
$from = array(
"/\n?\[code\](.*?)\[\/code\]/si",
"/\n?\[php\](.*?)\[\/php\]/sie",
'/(^|[ \n\r\t])((http(s?):\/\/)(www\.)?([a-z0-9_-]+(\.[a-z0-9_-]+)+)(:[0-9]+)?(\/[^\/ \)\(\n\r]*)*)/is',
"/\[img\](.*?)\[\/img\]/si",
"/\[i\](.*?)\[\/i\]/si",
"/\[b\](.*?)\[\/b\]/si",
"/\[u\](.*?)\[\/u\]/si",
"/\[s\](.*?)\[\/s\]/si",
"/([a-z_-][a-z0-9\._-]*@[a-z0-9_-]+(\.[a-z0-9_-]+)+)/is",
"/\[url\](.*?)\[\/url\]/si",
"/\[url=(.*?)\](.*?)\[\/url\]/si",
"/\n?\[quote\]\n*/i",
"/\[\/quote\]/i"
); 
$to = array(
"<TABLE BORDER=\"0\" ALIGN=\"CENTER\" CELLPADDING=\"0\" CELLSPACING=\"0\" WIDTH=\"80%\"><TR><TD CLASS=\"code\" ALIGN=\"LEFT\"><B>Code:</B><BR><HR>\\1<HR></TD></TR></TABLE>",
"'<TABLE BORDER=\"0\" ALIGN=\"CENTER\" CELLPADDING=\"0\" CELLSPACING=\"0\" WIDTH=\"80%\"><TR><TD CLASS=\"code\" ALIGN=\"LEFT\"><B>PHP:</B><BR><HR>'. strip_tags('\\1', '<') .'<HR></TD></TR></TABLE>'",
'\1[url=\2]\2[/url]',
"<IMG SRC=\"\\1\" BORDER=\"0\">",
"<I>\\1</I>",
"<B>\\1</B>",
"<U>\\1</U>",
"<S>\\1</S>",
"[url=mailto:\\1]\\1[/url]",
"<a HREF=\"\\1\" TARGET=\"_blank\" rel="noopener noreferrer">\\1</A>",
"<a HREF=\"\\1\" TARGET=\"_blank\" rel="noopener noreferrer">\\2</A>",
"<TABLE BORDER=\"0\" ALIGN=\"CENTER\" CELLPADDING=\"0\" CELLSPACING=\"0\" WIDTH=\"80%\"><TR><TD CLASS=\"quote\" ALIGN=\"LEFT\"><B>Quote:</B><BR><HR>",
"<HR></TD></TR></TABLE>"
);
 
$message = preg_replace($from, $to, $message); 
return $message; }?>

Elég sok BB kódot támogat. Ezek:

  • [b]szöveg[/b] – Félkövér betű
  • [s]szöveg[/s] – Áthúzott betű
  • [img]kép elérési útja[/img] – Kép beillesztése
  • [i]szöveg[/i] – Dőlt betű
  • [u]szöveg[/u] – Aláhúzott betű
  • [code]kód[/code] – Kód beszúrása
  • [php]kód[/php] – PHP kód beszúrása
  • [url=mailto:e-mail-cím]valami szöveg[/url] – URL beszúrása (a példában e-mail cím-é)
  • [quote]szöveg[/quote] – Idézet

Eddig meg is vagyunk. Másoljuk be a következő kódot abba fájlba, ahova a fenti is került.

1
<?php print bb("ide használhatod a kódokat"); ?>

Vegyünk egy példát:

Bemásoljuk a fenti kódot egy index.php nevű fájlba.
Ezután meg szeretnénk jeleníteni a kepek/image.gif nevű képet BB kódokkal. Ehhez beírjuk az index.php végére:

1
<?php print bb("[img]kepek/image.gif[/img]"); ?>

Majd elmentjük és feltöltjük egy tárhelyre az index.php-t, és gyönyörködünk :D

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

11 HOZZÁSZÓLÁS

  1. Sziasztok!

    Azt szeretném megkérdezni az okosabbaktól (mármint, tőlem okosabbaktól), hogy a fórumra belinkelt kép méretét hogyan tudnám megváltoztatni a kép újra feltöltése nélkül?
    Na mégegyszer neki futok mert nem voltam elég közérthető!
    Az egyik user feltett egy képet de az szét nyomja az oldalt! Törölni nem akarom, mert a kép kellene. A hagyományos módu ( [img=50] vagy [img=50×50] ) formázás nem működik. Mit és, hogyan, és hol kellene átírnom, hogy ezt a formázási módot elfogadja?
    Vagy van e olyan beállítási lehetőség hogy ha nagyobb a kép a megjelenített oldalnál akkor azt automatikusan méretezze át a megjeleníthető maximális méretre, az oldal szét tolása nélkül?
    Ez utóbbi lenne a praktikusabb mert ez nem igényelne utólagos korrekciókat!

    A fórum SMF 1.1.4!

    Köszönöm a segítséget előre is!

  2. vbulletin-nél és ipb-nél ehhez egy plugin/mod/hack (hol hogy hívják) kell amit a fórumhoz kell telepíteni, szerintem az smf-nél is valami ilyesmi lesz a megoldás. Viszont pontosabb segítséget nem tudok mondani, a fórummotort magát nem ismerem.

  3. az én kérdésem az lenne hogy lehet-e szöveg árnyékolást csinálni BB kóddal?

  4. A cikk maga jó, csak kevésnek találtam a hozzáfűzött magyarázatot, hogy pontosan is működik a kód. Ha direkt van így akkor nem szóltam semmit…

  5. Én még azt sem tudtam meg belőle, hogy ez mi ellen van! Ha valaki nem tudja, mi az a BB (nekem csak az ivólé ugrik be), annak ebből sem fog kiderülni. Egy kis előzetes jó lenne mindenképpen hozzá.

  6. BonFire: (ha tudod, hogy mi ez, akkor bocsi, hogy neked címzem) maga a BB kód egy igen hasznos dolog. Ha úgy nézzük, akkor a html nyelv egy egyszerűsített változata, amit sokkal egyszerűbben és rugalmasabban lehet használni, mint a sima html-t, mindjárt leírom, hogy az egyszerűséget hogyan értem :)

    tion74, BonFire (meg akiknek nem világos :))
    Az egész működése nagy vonalakban:

    Az első sorban a function bb($message) segítségével létrehozunk egy bb funkciót/függvényt, ami vár egy szöveget (ez tartalmazza az általunk bb kóddokkal megformázott szöveget), amit a $message változóba rak.
    A második létre van hozva egy $from tömb, ami tartalmazza a bb kódokat a preg_replace függvény (a php dokumentációban http://hu.php.net szépen le van írva, hogy mik ezek a követelmények) követelményei alapján (3-15. sor).
    Következő lépésben egy $to tömb kerül deklarálásra (létrehozásra), ami tartalmazza a bb (amik a $from tömbben találhatók) kódok html-es megfelelőjét (a html-es parancsok a 18-30. sorban találhatók szintén a php-s preg_replace függvény követelményei szerint).
    A 33. sorban annyi történik, hogy a $message változó tartalma a preg_replace segítségével megváltozik (a bb kódok a html-es megfelelőjükre cserélődnek).
    A következő sorban pedig az van megadva, hogy a függvény kimenetére a $message értéke/tartalma kerül.

    Egy rövid példa, hogy maga a függvény mit is csinál egy kis bb kód ismertetéssel :)

    bb függvényünk ezt a bb kódos szöveget kapja meg:

    1
    2
    3
    
    [b]Ez egy félkövér szöveg[/b]
    [color=red]Ez meg egy piros szöveg[/color]
    [size=7]Ez pedig egy 7-es méretű szöveg[/size]

    a [b][/b] a félkövér szöveg parancsa
    a [color=szín][/color] a szöveg színét adja meg (megadható a színek angol nevével, de nem ajánlott, valamint a színek hexadecimális kódjával)
    a [size=méret][/size] a szöveg mérete (ez a méret 1-től 7-ig adható meg, de most fejből meg nem mondom, hogy melyik hányas betűméret pt-ben kifejezve)

    A függvény hatására a bb kódok (amik szögletes zárójelek között vannak) átváltanak a html-es megfelelőikre (amik a kacsacsőrök között vannak):

    1
    2
    3
    
    <b>Ez egy félkövér szöveg</b>
    <font color="red">Ez meg egy piros szöveg</font>
    <font size="7">Ez pedig egy 7-es méretű szöveg</font>

    A fenti kis program részlet használata (tételezzük fel, hogy a $szoveg változónk már kapott értéket a php futása során):

    1
    
    echo bb($szoveg);

    A fenti kis kód annyit csinál, hogy a bb függvény visszatérési értékét írja ki (természtesen már a lecserélt bb kódokkal, így megjelenik a formázott szöveg).

    Ha vmi nem világos, akkor írjatok nyugodtan, mert így késő este nem biztos, hogy mindent sikerült leírnom :)

  7. Nos, nem tudtam, köszi az infót, a két háromsoros példa jól mutatja a különbséget. Habár még komplett html-lel nem próbálkoztam, néha szükség van, hogy belepiszkáljak a kódokba is az oldalamon. És, ahogy látszik, rengeteg helyen lehet szintaktikai hibát ejteni, pl lemarad az egyik idézőjel. Főleg olyankor nehéz átlátni, ha nem az oldal forrását nézzük, mert azér az ugye színekkel értelemszerűen átláthatóan el van választva, a blogomon viszont minden karakter fekete.(Már úgy értem, hogy a szövegszerkesztő forrás nézetében.) Nem tudom, hogy az oldalamon mennyire tudnám használni, ez az üzemeltetőtől is függ, szerintem.

    A hexakódokkal minden oké, a PS-ben kikeverem a színt, és onnan tudok lesni. A betűméret, gondolom a h1-h7 szabvány szerint megy, nem pontban megadva, ez is érthető.

    Nem tudom, hogyan tudnám kipróbálni a blogon, mert ott eleve egy beépített felületen szerkesztünk, az meg olyan, amilyen. Az egész oldal php-jába meg azért nem mernék belepiszkálni. Lehet, hogy nincs is hozzáférésem. Mégiscsak egy ingyenes szolgáltató, nem vásárolt domain. Mindenesetre köszi a felvilágosítást!

  8. Nincs mit.
    Amúgy ha tippelnem kellene, akkor szinte 200%, hogy a blog.hu-n nem lehet az oldal forráskódjába belepiszkálni, valamint egy wysisyg szerkesztőt(gondolom vmi tinymce szerű szerkesztője van) elég nehéz átalakítani úgy, hogy forrás nézetben a html tag-eket lecserélje a bb kódos megfelelőikre, aztán szerkesztő nézetre visszaváltva ez a folyamat forduljon meg…

    A betűméretnél jól gondolod a h1-7 szabványt, viszont akár pontban is megadható a betűméret, mert a html ezt is támogatja, valamint pixelben(px) is, de nem mernék az életemmel fogadni abban, hogy a pixelben megadott mérettel minden böngésző boldogul.

    Valamint még egy kis háttérinfó a bb kódokról:
    Magát a kódokat a phpBB fórum fejlesztői találták ki, hogy a fórumban egyszerűbben és biztonságosabban (mivel nem html parancsokat visznek be, csak sima „parancs nélküli” szöveget) lehessen szöveget formázni.
    Gondolom az már nem újdonság, hogy ezek az ún. bb kódok elég sikeresek lettek a könnyű használhatóságuk miatt, így mindenki saját bb értelmezőt akar csinálni (vagy egy meglévőt ellopni, de ez ugyebár nem szép dolog :P).

  9. Értelmezés kérdése! Ha valami népszerű, fel van találva, és eljött az ideje, úgysem lehet útját állni. Ezt a kényesebbek talán lopásnak neveznék, de egészen másról van szó. Az internet és rajta rengeteg dolog (pl a flash), annak köszönheti határtalan népszerűségét és elterjedtségét, hogy nyílt forráskódúvá tették, így mindenki szabadon általakíthatja, és ma már egy modern weboldal elképzelhetetlen lenne flash nélkül. Aki okosan és nem csak üzleti szemmel néz a dolgokra, az úgy fogja vélni, hogy amit kitalált, azt meg kell, hogy ossza másokkal is, mert hasznosnak véli. Ebben az esetben elég, ha egyetlen helyen felbukkan valami, azt már utána átveszik másolják és terjesztik. Ha nem így tesz, és csak az anyagiakra gondol, akkor tartsa meg magának a kis féltve őrzött titkát, mert akkor meg a nagyközönséget nem fogja érdekelni.

    Természetesen én nagyon jól tudom, hogy mi az a szellemi termék, milyen fáradtságos munka, míg elkészül (benne voltam a szakmában évekig), de végül is azért csinálja az ember, hogy mások hasznát vegyék. Ha a lemezeimmel akartam volna meggazdagodni, valószínűleg hoppon maradok, mert ahhoz nem elég jól csinálni, még szerencse is kell hozzá, másrészt soha a kutya nem adott volna érte egy árva fityinget sem. Így legalább megvolt az ellenszolgáltatás, ha nem is anyagi, de ismerték, szerették, a koncertre eljártak, és dicsérték. Ha ez a legtöbb, amit kihozhatok belőle – hogy néhány embernek szerzek néhány jó pillanatot -, akkor már megérte.

    Mellesleg az is vitára adhatna okot, hogy ez miért újdonság, hiszen nem tesz mást, csak egy régi, nehezen kezelhető rendszert egy kissé átláthatóbbá tesz. Ettől ez még nem új találmány, maximum fejlesztés. Egy olyan út, mint amikor az első automobilt feltalálták, és fokozatosan fejlődött a technika napjainkig. Mindezek ellenére, az autó alapelve még mindig ugyanaz, semmit nem változott. Kémiai égés hajt meg egy motort, és ez attól gurul.

  10. Üdv engem az érdekelne hogy az hogyan oldható meg, hogy ha a profilban bb-kódot használok saját weboldalon akkor ugye átírja html kódokba és a módosításnál az hogy oldható meg hogy a html kódot visszaalakítsa bb kóddá? Próbáltam a tömbök felcserélésével de hibát ír ki:S. Ha valaki tud légyszi segítsen

  11. Sziasztok!
    Bocs, hogy ide írok, de más oldalt nem találtam, ami preg_replace-el foglalkozik.
    Sajnos nem nagyon értem, hogy működik, de már eljutottam addig, hogy van egy url és a ?-től a következő / jelig lecseréli egy / jelre:
    ezt: http://localhost/WW2_modpack?utm_source=feedburner…/
    erre: http://localhost:90/WW2_modpack/

    Ehhez ezt használom, de akkor nem müxik, ha nincs a kérdőjel után per jel: preg_replace(„/?(.*?)//si”, „/”,$url)
    Azt hogy lehet, hogy ha nincs /, akkor a string végéig cserélje le?

    Előre is kösz a segítséget!

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét