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

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

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
  1.     $text = str_replace('[B]', '<strong>', $text);
  2.     $text = str_replace('[/B]', '</strong>', $text);
  3.     $text = str_replace('[I]', '<em>', $text);
  4.     $text = str_replace('[/I]', '</em>', $text);
  5.  
  6.     // другие теги

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

К счастью, я оказался не первым, кто столкнулся с этой проблемой. Кто-то уже написал специальный класс, который конвертирует BBCode в HTML.
 
Итак, второй способ. Используйте библиотеку xBB (вы можете получить ее здесь: http://xbb.uz/download.bb).
 
Она очень функциональна и вы можете убедиться в этом на ее собственном сайте, а здесь я всего лишь покажу, как она может упростить обработку BBCode:
 
PHP
  1. <form action=”index.php”>
  2. <textarea name=”message”></textarea><br />
  3. <input type=”submit” value=”Send” />
  4. </form>
  5. <?
  6.     require_once 'bbcode/bbcode.lib.php';
  7.     $msg = $_REQUEST[‘message’];
  8.     $result = new bbcode($msg);
  9.     echo $result->get_html();
  10. ?>

Если вы введете: [B]Hello, world![/B],
то на выходе получите Hello, world!.
 
Ну вот и все. Новички могут отправляться в поиск, набираться опыта и профессионализма Well Всем хорошего дня и пока.
 
Перевод Дмитрия Скоробогатова
Биржа долевых инвестиций SIMEX.

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

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


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

Последние десять комментариев:

08.01.2011 08:20:34 #
Mozilla Firefox dima
хотя  у вас русская блин... в ней лечги рабираться.. ((( (всмысле коменты русские)

Не понял, какой язык Вам нужен, но редактор предусматривает возможность локализации на любой язык.
08.01.2011 08:17:32 #
Mozilla Firefox dima
Я имею в виду что елси эти теги перевести в html и воспроизвести через любой браузер то Test будет норм показываться.... при любом раскладе что сверху будет <strong> (<b>) что он бдует по середине где стоять...

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

xBBEditor, - редактор BBCode, - вложен в один архив с парсером.
08.01.2011 07:06:18 #
Opera Гость
хотя  у вас русская блин... в ней лечги рабираться.. ((( (всмысле коменты русские)
08.01.2011 06:55:57 #
Opera Гость
Вот ели как нашёл уже  на свой сайт прикручивал из за того что вы в топ по запросу залезли найти их снова не мог
 

bb библиотека... вроде работает без глюков...единствено что хотелось бы отдельно взять вашу форум ввода...
 
придётся крутить вертеть и прочее
08.01.2011 06:49:00 #
Opera Гость
я что должен пользевателю обеснять кто во что вложен быть должен....
 
пользеватель должен тварить так как творит ... а система должна его понимать с точки зрения 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:45:39 #
Opera Гость
ой что за глюк и это ставить на свой сайт... он и без него глюковатый. до жути...
08.01.2011 06:44:51 #
Opera Гость Павел
test
test
[/b][/size]
25.03.2009 21:53:27 #
Opera Rederick Asher
dima
 
Да, согласен. Правильный код должен выглядеть так:
Text
[center][size=7][b]test[/b][/size][/center]
25.03.2009 19:01:59 #
Iceweasel dima
Rederick Asher, этот код У МЕНЯ нормально работает. А у тебя - совершенно не нормально. Нельзя считать нормальным следующий HTML-код:
 
HTML
<font size="7"><b><center>test</center></b></font>

Он совершенно невалиден. А у меня все ок. Линейные элементы НЕ МОГУТ содержать блочные элементы. Т.е. код ОШИБОЧЕН. И обрабатывается в моей реализации так, как и должен обрабатываться в BBCode: выводится как есть.
25.03.2009 17:54:48 #
Opera Гость Rederick Asher
qwerty
хе, а у меня такой нормально работает Well

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

Представиться как     Антибот:
   

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


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