2 способа обработки BBCode.

В некоторых форумах, гостевых книгах или других подобных скриптах, где пользователь может оставлять свои сообщения, обычного поля для ввода оказывается недостаточно. Люди привыкли к разным оформлениям вроде подчеркивания или выделения жирным шрифтом текста, которому надо уделить особое внимание. Как это делается в редакторах вроде MS Word и т.д.

Это не только делает текст более привлекательным, но и прибавляет ему удобочитаемости и удобство использования (например, если в текст надо вставить именно линк, а не просто адрес ресурса).

Подобные вещи в гостевых книгах и форумах сейчас уже используются повсеместно. Но как это можно реализовать? Именно об этом я сегодня расскажу.

Первая идея, которая приходит в голову – это просто дать возможность ввести html-код в поле для ввода сообщений. Другими словами, если раньше человек писал в этом поле что-то вроде:
“Всем привет! Давно не видел такого мерзкого сайта! Пока.)”
То с использованием html он сможет написать:
“Всем привет! Давно не видел такого мерзкого сайта! Пока.)”
И после вывода его сообщения другим посетителям но будет оттранслировано браузером уже как html-код и отобразится как:
“Всем привет! Давно не видел такого мерзкого сайта! Пока.)”

Все бы ничего, но у этого способа есть как минимум два недостатка.
Во-первых, текст всех сообщений будет отображаться на каком-то сайте, внутри его html-кода. А это значит, что обязательно найдется какой-нибудь кхм-кхм, который вместо сообщения напишет:
“</table>”
И после вывода его сообщения на странице вся верстка сайта сломается и страница, в лучшем случае, будет похожа на пазл.
Кроме того, если в это поле ввести не html-код, а javascript, то у каждого пришедшего на сайт и видящего это сообщение, в окне браузера будет выполняться этот javascript-код.
Хорошо, если он будет делать только alert(‘Hello, world’), но ведь там может быть 5ти страничный скрипт, который уведет у вас ваш webmoney-кошелек, а потом еще винт отформатирует.

Во-вторых, и, в-главных, не все, кто пользуется Интернетом, знает html.

Суммируя все вышесказанное, умные люди придумали BBCode, который напару с javascript решает эти проблемы.

В результате мы получаем то же поле для ввода, но сверху или где-то рядом ставят кнопочки похожие на кнопки из MS Word, например, для выделения текста жирным или курсивом и т.д.

При нажатии на кнопку в поле для ввода указанный текст обрамляется специальными выражениями. Например, для нашего случая эффект будет таким:
“Всем привет! Давно не видел такого [B]мерзкого[/B] сайта! Пока.)”

Синтаксис BBCode очень на похож на html, но им не является (это решает первую проблему). А кнопки предоставляют пользователям удобный интерфейс для работы (это решает вторую, и, главную проблему ).

После того как пользователь ввел свое сообщение в поле и нажал кнопку “Отправить”, оно передается php-скрипту, задача которого – преобразовать BBCode в html и сохранить в базе.

Теоретически есть два способа это реализовать.

Начнем с первого – простая замена.

<?
    $text = str_replace(‘[B]’, ‘<b>’, $text);
    $text = str_replace(‘[/B]’, ‘</b>’, $text);
    $text = str_replace(‘[I]’, ‘<i>’, $text);
    $text = str_replace(‘[/I]’, ‘</i>’, $text);

    // и т.д.
?>

Это первый и очевидный способ реализации. На первый взгляд он кажется довольно простым, но проблемы начались, когда я столкнулся с выражением вроде:
[url=https://i-novice.net]Мой сайт[/url]
синтаксис которого посложнее для разбора.

К счастью с этой проблемой столкнулся не только я один, но и много людей до меня. А некоторые даже написали специальный класс, который сам преобразует bbcode в html без вашего вмешательства.

Итак, способ второй. Используем библиотеку xBB.
(скачать можно здесь https://xbb.uz/download.bb)

Она довольно функциональная и со всеми примочками вы сможете ознакомиться на сайте, но то, насколько она упрощает жизнь, я покажу вам здесь.

Рассмотрим на простом примере:

index.php

<form action=”index.php”>
<textarea name=”message”></textarea><br />
<input type=”submit” value=”Send” />
</form>
<?
    require_once 'bbcode/bbcode.lib.php';
    $msg = $_REQUEST[‘message’];
    $result = new bbcode($msg);
    echo $result->get_html();
?>

После ввода
[B]Hello, world![/B]
Будет выведено
Hello, world!

Ну, вот собственно и все. Novice снова отправляется в поиски за опытом и профессионализмом Удачи и до встречи.

Теги: bbcode, Путь Новичка

Читайте также:

• Как перед покупкой хостинга…
• Обзор книги: Запускаем…
• Сайты для верующих людей: новые…
• Стартовал запуск поисковиков с…
• В сети появился первый поисковик
• Чистка поисковых запросов…
• Выбор хостинга с учётом его…
• Психология мотивации, учимся…

13 Ответов на “2 способа обработки BBCode.”

1. DeveloperGuru.NET
   

   Надеюсь, что библиотека это обрабатывает, но первый способ не подходит еще и потому, что можно написать:

   [B]Hello, world!

   Надо обязательно проверять наличие открывающего и закрывающего тегов одновременно, иначе будет ломаться весь дизайн.

2. novice
   

   Да, кстати. Очень полезное замечание. Я проверил - библиотека xBB таких проверок не делает (видимо из-за сложности реализации для вариантов с большой вложенностью), поэтому не лишним будет хотя бы подсчитывать кол-во открывающихся/закрывающихся тегов (чтобы совпадало) вручную.

3. lena
   

   Ага! ето дествительно проблема, но не для новичка 😉
   Я ужасно люблю експерементировать… Особено когда узнала о функции str_replace(); Слепила в тотже вечер…
   Представляю для вас новинку! bbcode на русском язике…
   (не нужно делать проверку на закритие тега)…
   Вот собствено скрипт (пресонольно для i-novice.net 😉 от новичка lena )…

   <?
   $str = $_POST['text1'] ;
   
   $str= strip_tags($str, '' ); // вирезаем все спец символи html
   htmlspecialchars( $str);
   // echo $str; // откривать ети кавички только при редактирование переменой strip_tags()
   
   
   $provirka = "[левий]";
   $provirka1 = "[/левий]";
   
   $provirka2 = "[центер]";
   $provirka3 = "[/центер]";
   
   $provirka4 = "[вправо]";
   $provirka5 = "[/вправо]";
   
   $provirka6 = "[Абзац]";
   $provirka7 = "[/Абзац]";
   
   $provirka8 = "[ссылка]";
   $provirka9 = "[/ссылка]";
   $provirka_z4 = "[текст]";
   
   $provirka10 = "[рисунок]";
   $provirka11 = "[/рисунок]";
   $provirka_z2 = "[ширина]";
   $provirka_z3 = "[высота]";
   
   
   $provirka12 = "[текст цвет]";
   $provirka13 = "[цвет]";
   $provirka_z1 = "[/цвет]";
   
   $provirka14 = "[шрифт]";
   $provirka15 = "[размер]";
   $provirka16 = "[/шрифт]";
   
   $provirka17 = "[шрифт Times New Roman]";
   $provirka18 = "[шрифт Comic Sans MS]";
   $provirka19 = "[шрифт Monotype Corsiva]";
   
   $provirka20 = "[жирный]";
   $provirka21 = "[/жирный]";
   
   $provirka22 = "[курсив]";
   $provirka23 = "[/курсив]";
   
   $provirka24 = "[подчеркнутый]";
   $provirka25 = "[/подчеркнутый]";
    
   $str = str_replace("$provirka", "", $str);
   $str = str_replace("$provirka1", "", $str);
   
   $str = str_replace("$provirka2", "", $str);
   $str = str_replace("$provirka3", "", $str);
   
   $str = str_replace("$provirka4", "", $str);
   $str = str_replace("$provirka5", "", $str);
   
   $str = str_replace("$provirka6", "    ", $str);
   $str = str_replace("$provirka7", "", $str);
   
   $str = str_replace("$provirka8", "<a href=", $str);
   $str = str_replace("$provirka9", "</a>", $str);
   $str = str_replace("$provirka_z4", ">", $str);
   
   $str = str_replace("$provirka10", "", $str);
   $str = str_replace("$provirka_z2", " width= ", $str);
   $str = str_replace("$provirka_z3", " height=", $str);
   
   $str = str_replace("$provirka12", "", $str);
   $str = str_replace("$provirka_z1", "", $str);
   
   $str = str_replace("$provirka14", "", $str);
   $str = str_replace("$provirka16", "", $str);
   
   
   $str = str_replace("$provirka17", "", $str);
   $str = str_replace("$provirka18", "", $str);
   $str = str_replace("$provirka19", "", $str);
   
   $str = str_replace("$provirka20", "<b>", $str);
   $str = str_replace("$provirka21", "</b>", $str);
   
   $str = str_replace("$provirka22", "<i>", $str);
   $str = str_replace("$provirka23", "</i>", $str);
    
   $str = str_replace("$provirka24", "", $str);
   $str = str_replace("$provirka25", "", $str);
   
    echo $str;
   ?>

   Не розрушает структура сайта…
   Пожалуста если можете запрограмировать ети коди в кнопки, и улутшить скрипт… Я непротив…

4. lena
   

   Жалко что блог вирезает занки html… Ех, настроение упало!…

5. lena
   

   Да ми ми также забили О! защитном коде.. Вот примерь, он у меня не роботает видает ошибку… скрипт можно скачать здесь..
   [ссылка]
   посмотрите плиз, очень полезная штучка…

6. novice
   

   Чтобы вставлять куски кода в комментарий можешь обрамлять код в такие вот штуки:

   открывающаяся_квадратная_скобка cc lang=”php” закрывающаяся_квадратная_скобка
   < ?
   // здесь идет код
   ?>
   открывающаяся_квадратная_скобка /cc закрывающаяся_квадратная_скобка

   закрывающаяся_квадратная_скобка = ]
   открывающаяся_квадратная_скобка = [

   Ато wordpress плохо переваривает код без этого.

   Насчет защитного кода или каптча, как его называют, постараюсь написать в ближайшее время статью. Спасибо за идею в очередной раз

7. Emtec
   

   Огромное человеческое спасибочки !

8. Руслан
   

   Огромное человеческое спасибо автору, давно искал

9. Fazer
   

   А если мне надо внести в MySQL базу

   Написать текст с Bbcode потом перевести BBCode теги в обычные HTML и занести в базу …

   Как это осуществить??!…

10. dobs
    

    2Fazer
    Че за тупой вопрос данные пропустить через нужные фильтры и все…

11. Рома
    

    Проверка кода

12. АЛЕКС
    
    [b]Привет[/b]
    [indent]Первый - красная строка. Это отступ от левого края выделяет абзац текста[/indent]
    [text_justify]Выравнивание текста по ширине листа - это следующий способ правильного и удобного для чтения форматирования текста. Доставьте удобство своему читателю[/text_justify]

13. Ксюша
    

    У меня сайт на друпале. И в шаблон комментариев не подключается библиотека, пишет: Fatal error: require_once() [function.require]: Failed opening required ‘/bbcode/bbcode.lib.php’ (include_path=’.:/opt/php-5.3/pear’). Как быть?