• Спонсоры

  • Рубрики

  • Архивы

  • Популярное



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=http://i-novice.net]Мой сайт[/url]
синтаксис которого посложнее для разбора.

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

Итак, способ второй. Используем библиотеку xBB.
(скачать можно здесь http://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 снова отправляется в поиски за опытом и профессионализмом 🙂 Удачи и до встречи.





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



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

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

    [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", "&nbsp;&nbsp;&nbsp; ", $str);
    $str = str_replace("$provirka7", "", $str);

    $str = str_replace("$provirka8", "&lt;a href=", $str);
    $str = str_replace("$provirka9", "</a>", $str);
    $str = str_replace("$provirka_z4", "&gt;", $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. Огромное человеческое спасибочки !

  8. Руслан

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

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

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

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

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

  11. Рома

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

  12. АЛЕКС

    [youtube]http://www.youtube.com/watch?v=p5em6PisRyk[/youtube]
    [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’). Как быть?

Оставить комментарий


© 2008 - 2017 i-novice.net | Все права защищены.