На главную | Публикации | Форумы

Интернет, компьютеры, софт и прочий Hi-Tech

Сервисы

Избранные доки

Метки (все метки)

hi tech, internet, it, интернет, информационные технологии, ит, по, программное обеспечение, сайт, софт

Подписаться через RSS2Email.ru

Дополнительно

оптимизация, сайт, мониторы, движок, Битрикс, хостинг, сайты, мобильные, электроника, видеокарта

Показать HTML | Показать BBCode

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

Перевод с английского. Оригинальный текст: 2 ways of BBCode handling

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

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

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

Первое, что приходит на ум, - разрешить пользователям вводить код HTML в поле ввода. В других словах, если пользователь пишет что-то типа

"Привет всем! Я уже давно не видел такого отвратительного сайта. Пока",

то разрешить ему писать так:

"Привет всем! Я уже давно не видел такого <b>отвратительного</b> сайта. Пока",

чтобы остальные пользователи увидели в своих браузерах такой вывод:

"Привет всем! Я уже давно не видел такого отвратительного сайта. Пока".

Все ничего, но этот способ имеет 2 небольших недостатка.

Первый из них, - сообщения будут выводиться в окружении HTML-кода страницы. Однажды в какое-то сообщение будет введено "</table>" или типа того. При выводе этого сообщения разметка сайта будет нарушена, и в лучшем случае сайт распадется на пазлы.

Более того, если кто-нибудь вместе с HTML введет в сообщение код JavaScript, то он выполнится в браузерах всех других пользователей, посетивших страницу с этим сообщением. Этот JS может всего лишь напугать, если будет чем-то вроде "alert('Hello, world!');". Но он может оказаться и скриптом в 5 страниц, который украдет ваш кошелек WebMoney, а после этого отформатирует ваш жесткий диск.

Второй и главный недостаток, - это то, что не все пользователи Интернета знают HTML.

Обобщив все вышесказанное умный человек придумал BBCode, который вместе с JavaScript решает все наши проблемы.

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

После нажатия на кнопку, выделенный текст сообщения будет окружен специальными выражениями. Например, в нашем случае текст будет выглядеть так:

"Привет всем! Я уже давно не видел такого [B]отвратительного[/B] сайта. Пока".

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

После того, как пользователь ввел сообщение и нажал на кнопку "отправить", сообщение пересылается PHP-скрипту, который должен сконвертировать BBCode в HTML и сохранить результат в базе данных.

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

Давайте начнем с простой замены.

PHP

$text = str_replace('[B]', '<strong>', $text);
$text = str_replace('[/B]', '</strong>', $text);
$text = str_replace('[I]', '<em>', $text);
$text = str_replace('[/I]', '</em>', $text);
// другие теги

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

[url=http://i-novice.net]Мой блог[/url].

К счастью, я оказался не первым, кто столкнулся с этой проблемой. Кто-то уже написал специальный класс, который конвертирует BBCode в HTML.

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

Она очень функциональна и вы можете убедиться в этом на ее собственном сайте, а здесь я всего лишь покажу, как она может упростить обработку BBCode:

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!.

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

Всем хорошего дня и пока.

Перевод Дмитрия Скоробогатова

Последнее редактирование: 2008-12-28 03:14:55

Метки материала: BBCodes, блог, сайт, скрипт BBCode, скрипт PHP, редактор BBCode

13 комментариев

1 | 2 | Последняя

13.03.2009 19:39:29

Гость ыыы

А чтож мой коммент удален?

13.03.2009 23:16:15

dima

Внизу, красными буквами: "Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а".

Если кто-то игнорирует эту просьбу, его коммент удаляется.

16.03.2009 19:09:39

Гость qwerty

[size=7][b][center]test[/center][/b][/size]
Вот такой набор ВВ кодов ломается при обработке. Почему?

25.03.2009 17:54:48

Гость Rederick Asher

qwerty
хе, а у меня такой нормально работает Well

25.03.2009 19:01:59

dima

Rederick Asher, этот код У МЕНЯ нормально работает. А у тебя - совершенно не нормально. Нельзя считать нормальным следующий HTML-код:

HTML

Он совершенно невалиден. А у меня все ок. Линейные элементы НЕ МОГУТ содержать блочные элементы. Т.е. код ОШИБОЧЕН. И обрабатывается в моей реализации так, как и должен обрабатываться в BBCode: выводится как есть.

25.03.2009 21:53:27

Rederick Asher

dima

Да, согласен. Правильный код должен выглядеть так:

Text

[center][size=7][b]test[/b][/size][/center]

08.01.2011 06:44:51

Гость Павел

test

test

[/b][/size]

08.01.2011 06:45:39

Гость

ой что за глюк и это ставить на свой сайт... он и без него глюковатый. до жути...

08.01.2011 06:49:00

Гость

я что должен пользевателю обеснять кто во что вложен быть должен....

пользеватель должен тварить так как творит ... а система должна его понимать с точки зрения html

Text

[size=7][b][center]test[/center][/b][/size]

Text

[center][size=7][b]test[/b][/size][/center]

Я имею в виду что елси эти теги перевести в html и воспроизвести через любой браузер то Test будет норм показываться.... при любом раскладе что сверху будет <strong> (<b>) что он бдует по середине где стоять... этот тег... блин...глюка... ((((((((((((((((((((((((

08.01.2011 06:55:57

Гость

Вот ели как нашёл уже на свой сайт прикручивал из за того что вы в топ по запросу залезли найти их снова не мог

bb библиотека... вроде работает без глюков...единствено что хотелось бы отдельно взять вашу форум ввода...

придётся крутить вертеть и прочее

1 | 2 | Последняя

Оставьте, пожалуйста, свой комментарий к публикации

© 2007-2012, Дмитрий Скоробогатов.
Разрешается воспроизводить, распространять и/или изменять материалы сайта
в соответствии с условиями GNU Free Documentation License,
версии 1.2 или любой более поздней версии, опубликованной FSF,
если только иное не указано в самих материалах.