Webmaster общности: Predpriemach.com | SearchEngines.bg

    BBCode с оцветяване на [code]

    Автор: our

    Тъй… доста време се мъчих да го напиша това 😀 Самият ББКод представлява един preg_replace, който заменя със и примерно – дотук нищо сложно … Smile
    И така … понеже ще го напиша набързо може да не е изключително разбираемо, но ще отговарям на всякакви въпроси по него Smile

    …..
    Първо да направим формата за писане.
    Представлява една текст-ареа и бутончета с малко JS.
    Ето го JS-то :

    function our(id_elem, text) {
    x=document.getElementById(id_elem).value;
    document.getElementById(id_elem).value = x +' '+text;
    }

    Функция, която взема текста от textarea-та и после го връща обратно, заедно със посочения в нея текст. Smile
    След това си правим една textarea

    <textarea id='test'></textarea>

    Smile Сега слагаме покрай нея бутончета, които ще вкарват бб-кода в нея. Те са прости input-и със зададена функцията our() която направихме с JS-то горе.

    <input onclick="javascript: our('textarea','')" type='button' value='B'>
    <input onclick="javascript:our('textarea','[i][/i]')" type='button' value='i'>
    <input onclick="javascript:our('textarea','[u][/u]')" type='button' value='u'>

    И така нататък … допишете си бутончета за [size], [color] , [img] и така нататък…
    our(‘textarea’,“) задава на бутона да изведе в текстовото поле при натискане (не знам това има ли нужда да го обяснявам, но … Smile )
    И така … да приемем, че сме добавили вече урока в базата данни и вече сме на фаза разглеждане.
    И да речем, че сме взели съдържанието на урока в една променлива $lesson

    $lesson = $row['lesson'];

    Първото, което правим е да минем променливата през htmlspecialchars(); и nl2br(); ЗАДЪЛЖИТЕЛНО В ТОЗИ РЕД, а не обратното. Smile

    $lesson = nl2br(htmlspecialchars($lesson));

    И така… Следват 9 регулярни израза за всеки ббкод поотделно. Следното

    $bbcode_regex = array(
    0 => '/\[b\](.+?)\[\/b\]/s',
    1 => '/\[i\](.+?)\[\/i\]/s',
    2 => '/\[u\](.+?)\[\/u\]/s',
    3 => '/\[quote\](.+?)\[\/quote\]/s',
    4 => '/\[quote\=(.+?)](.+?)\[\/quote\]/s',
    5 => '/\[url\](.+?)\[\/url\]/s',
    6 => '/\[url\=(.+?)\](.+?)\[\/url\]/s',
    7 => '/\[img\](.+?)\[\/img\]/s',
    8 => '/\[color\=(.+?)\](.+?)\[\/color\]/s',
    9 => '/\[size\=(.+?)\](.+?)\[\/size\]/s'
    );

    Гледах го десетина пъти, надявам се да е вярно…. И така – регулярните изрази не са лесно нещо, но изключително просто ще обясня, че (.+?) в нашият случай служи за вземане на какъвто и да е символен низ между съответните тагове.
    /\](.+?)[\/b]/s означава да се вземе какъвто и да е текст между и А многото \ са там защото ] [ и / са специални символи и трябва преди тях да се поставя \, за да не се приемат като команди в израза… Надявам се ме разбрахте. Взетият от между скобите текст (.+?) се присвоява на нещо като променлива $1, ако в същият израз имахме още едни скоби (.+?) (както е при size, color и url се получава и $2, защото там освен текста, трябва да вземем и това след равното (пр: [size=2]асд[/size] ).
    И така след 9-те регулярни израза следва да напишем и това, с което ще се заместват. А то е :

    $bbcode_replace = array(
    0 => '<b>$1</b>',
    1 => '<i>$1</i>',
    2 => '<u>$1</u>',
    3 => 'Цитат:<br/>$1',
    4 => '$1 каза:$2',
    5 => '<a href="$1">$1</a>',
    6 => '<a href="$1">$2</a>',
    7 => '<img src="$1" alt="Image"/>',
    8 => '<span style="color:$1">$2</span>',
    9 => '<span style="font-size:$1pt">$2</span>'
    );

    И така … в 0 ограждаме текста от скобите $1 във и
    Във 1 го ограждаме между и
    Във 2 между и
    Във 3 (ако няма [quote=edi koi si]) пишем думата Цитат : и поставяме цитата тук ($1)
    Във 4 ако има [quote=…] Думата след равното ни е $1, а самият текст ни е $2 ( $1 каза : $2 )
    И така нататък на същият принцип до края … 🙂

    Сега сортираме двата масива (с регулярните изрази и със заменките) чрез функцията ksort. В случая не е жизнено важна, но е добре да я има

    ksort($bbcode_regex);
    ksort($bbcode_replace);

    И заменяме единият с другият масив

    $lesson = preg_replace($bbcode_regex, $bbcode_replace, $lesson);

    И така вече имаме целият урок със готов ббкод, но без таговете code и /code…
    Помните ли, че в началото сложихме един nl2br, който направи всички нови редове на
    , за да се визуализират ? 🙂 Сега обаче за тага code трябва да ги няма, защото функцията, която ще ползваме ще си сложи неини си
    и тези ще останат и ще се виждат. Момента е да си направим една функция за премахването им :

    function br2nl($string)
    {
    return str_replace("<br />","",$string);
    }

    Изтриваме <br /> във зададения текст – нищо сложно 🙂
    Така … сега си правим функция, която ще обработи code-тата. Ето я и нея :

    function code($s)
    {
    $s = str_replace("]\n", "]", $s);
    $match = array('#\[code\](.*?)\[\/code\]#se');
    $replace = array("highlight_string(htmlspecialchars_decode(br2nl(stripslashes('$1'))), true)");
    return preg_replace($match, $replace, $s);
    }

    И така … Какво прави фунцията. Подава и се един низ $s (целият урок) и какво прави тя…
    Първо маха всички \n след ] скоба за затваряне на таг. Със един прост str_replace.
    След това един регулярен израз взема съдържанията между code-тата.
    Какво прави заменящият масив ?
    Минава съдържанието между code и /code през няколко функции.
    stripslashes(); маха наклонените черти преди кавички.
    br2nl(); нашата функция от по-горе, с която махахме <br /> тата
    htmlspecialchars_decode(); – функция обратна на htmlspecialchars();, която от < “ итн … връща обратно към нормални символи.
    И highlight_string, която оцветява кода между <?php и ?> затова беше нужно да използваме htmlspecialchars_decode();
    Минаваме урока през тази функция

    $lesson = code($lesson);

    И вече имаме готови обработени code и /code
    Сега остава само да визуализираме кода урока.

    echo $lesson;

    Това няма да го обяснявам
    Mad Aко някой нещо не е разбрал да пита във форума – ако имам грешки ще ги оправям Smile
    Успех Mad

    Оставете коментар