Текст, которому с помощью стиля можно менять свойства.

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

Форматирование текста:

[b] Важный текст, полужирный

[i] Важный текст, курсив

Просто полужирный

Просто курсив

[u] Подчёркнутый текст

[s] Зачёркнутый текст — аналогично варианту

Уменьшенный шрифт

Знак сноски сверху или индекс снизу от текста

Удалённый текст

Размеры шрифта:

Шрифт размером 13 пунктов

Шрифт размером 15 пунктов

Шрифт размером 9 пикселей

Шрифт размером 12 пикселей

Шрифт размером 15 пикселей

Размер 0

Размер +1

Размер +2

Возможные варианты размеров шрифтов (визуальная оценка) доступны .

Заголовки:

Заголовок 1-го уровня

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 6-го уровня

Оформление текста с помощью шрифтов:

Шрифт Comic Sans Ms

Шрифт Monotype Corsiva

Шрифт Tahoma

Возможные варианты типов шрифтов (наименования и визуальная оценка) доступны .

Оформление текста с помощью цвета:

Красный текст
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.

Синий текст
* Цифра #0000ff означает синий цвет в RGB палитре.

Голубой фон
* У фона тоже можно менять цвет.

Синий текст, серый фон

Некоторые предопределённые цвета:

Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RR GG BB ):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Возможные варианты палитры цветов и их кодов/наименований доступны .

Выравнивание текста и форматирование параграфов

Выравнивание текста:

Выравнивание текста по левой стороне

Выравнивание по левой стороне со стилем

Выравнивание в абзаце влево

Выравнивание текста по центру

Выравнивание по центру со стилем

Выравнивание в абзаце по центру

Выравнивание текста по правой стороне

Выравнивание по правой стороне со стилем

Выравнивание в абзаце справа

Выравнивание текста по обеим сторонам

Выравнивание по обеим сторонам со стилем

Выравнивание в абзаце по обеим сторонам
* Выравнивание текстов по обеим сторонам отображается для текстов, имеющих длину более одной строки.

Оформление сносок (комментариев) с отступом абзаца:

[q] Цитата в строке

Цитата в строке со свойствами

Процитированный в отдельном блоке текст, у которого будет
небольшой отступ слева и особое оформление (стиль форума).

Примеры:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Форматирование параграфов и областей:

Привет! В этом абзаце первое предложение будет с "красной" строки, т.е. с отступом. Прямо как в книгопечати. Правда, в Интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.

Форматирование списков

Используем тэг или для маркированных списков:

• Один из пунктов списка
• Другой такой пункт
• Ещё один пункт.

[*] Другой такой пункт
[*] Ещё один пункт.

Для пронумерованных списков используем тэг :

1. Один из пунктов списка
2. Другой такой пункт
3. Ещё один пункт.

[*] Один из пунктов списка
[*] Другой такой пункт
[*] Ещё один пункт.

Закрывающий тэг не обязателен для использования:

• Один из пунктов списка
• Другой такой пункт
• Ещё один пункт.

[*] Один из пунктов списка
[*] Другой такой пункт
[*] Ещё один пункт.

Также возможно прямое указания вида списка:
— пронумерованный список
— алфавитный список
— список, пронумерованный римскими цифрами

Картинки

Http://img.cx/img/primer.jpg - пример вставки картинки.

Http://img.cx/img/primer.jpg - картинка слева.

Http://img.cx/img/primer.jpg - картинка справа.
* Данный код аналогичен коду в HTML:

Http://img.cx/img/primer.jpg - картинка по центру.
* Данный код аналогичен коду в HTML:

Аналогичные тэги с названиями и всплывающими подсказками:

Важно! В названии картинки нельзя использовать кавычки!

Http://img.cx/img/primer.jpg - пример вставки картинки.

Http://img.cx/img/primer.jpg - картинка слева.

Http://img.cx/img/primer.jpg - картинка справа.

Http://img.cx/img/primer.jpg - картинка по центру.

Картинки с указанными размерами:

Http://img.cx/img/primer.jpg - пример картинки с размером.
* Данный код аналогичен коду в HTML:

Http://img.cx/img/primer.jpg - картинка слева, с размером.

Http://img.cx/img/primer.jpg - картинка справа, с размером.

Вставка больших изображений с полосами прокрутки:

Http://www..jpg — картинка в выделенной области, если она больше доступного размера отображения на форуме.

Адрес - открыть изображение в новом окне.
* Данный код аналогичен коду в HTML:

Адрес - открыть изображение в том же окне.
* Данный код аналогичен коду в HTML:

У меня периодически появляется потребность в использовании «интерпретатора» BBCode в своих проектах (написанного на PHP), и постоянно нет времени искать какое-то более-менее удобоваримое решение, что в итоге выливается в использование или создание «костылей» для каждого конкретного случая.
Но вот, похоже, получилось найти то, что хотелось.

Моя претензия к подобным готовым решениям обычно в первую очередь заключается в неспособности этих библиотек правильно обрабатывать абзацы. Фактически они обычно вообще не используют абзацы (тэг P ), вместо этого в результате своей работы они просто вставляют тег
, заменяя обычные символы переноса строки. Я считаю такой метод эмулирования абзацев в 98 процентах, мягко говоря, не уместным. Но так как перенос строк по средствам
намного легче реализовать вместо «человеческих»

, так большинство и делает 🙁 Некоторые даже придумывают оправдания, что мол с br даже правильнее, отчасти, из-за подобной лени разработчиков различных готовых библиотек, другая часть людей думает, что тэг P является устаревшим (ведь даже во многих готовых продуктах и сайтах абзацы формируются путем использования
) 🙂

Приступим

Но, кажется, есть свет в конце туннеля. Это готовый класс для работы с BBCode , который, судя по всему, отлично справляется со своей задачей (ничего лучше пока не видел). Единственный минус в том, что документация, представленная на сайте , не на русском языке. Этот минус я и хочу побороть в этой статье, приведя пример использования класса с русскими комментариями.

Для начала нужно скачать библиотеку (на момент написания статьи версия библиотеки была 0.3.3). В скачанном архиве в папке src вы обнаружите два нужных нам файла: stringparser.class.php и stringparser_bbcode.class.php.

Для примера предположим, что у нас есть пустой файл «index.php» и рядом с ним мы создадим папку «/bbcode/», содержащую в себе два упомянутых выше файла.
Для примера минимальное содержимое файла «index.php» должно быть таким (запустив этот пример можно будет сразу увидеть, работает ли библиотека):

< ?php //Вставляем файл библиотеки require_once "bbcode/stringparser_bbcode.class.php"; //Создаем объект класса StringParser_BBCode $bbcode = new StringParser_BBCode (); //Добавляем объекту класса понятие о тэге [b] //(в итоге только этот тэг и будет //обрабатываться этим классом) $bbcode->addCode ("b", "simple_replace", null, array ("start_tag" => "", "end_tag" => ""), "inline", array ("block", "inline"), array ()); //Обрабатываем тестовую строку и выводим ее в браузер echo $bbcode->parse ("Тестовый текст, это слово должно быть [b]жирным"); ?>

Функция addCode

Наибольший интерес в этом коде может вызвать, пожалуй, функция addCode у объекта класса StringParser_BBCode, вот ее прототип и список описание параметров:

Void addCode (string $code, string $type, string $callback, string $params, string $content_type, array $allowed_in, array $not_allowed_in);

Эта функция добавляет понятие о тех или иных кодах (bb-кодах) для объекта класса, чтоб он мог потом обнаружить эти коды в тексте и соответствующим образом обработать их. Т.е. можно сказать, что изначально объект класса StringParser_BBCode вообще ничего не знает о стандартных bb-кодах и не способен обработать как-либо их. Поэтому этот объект нужно будет после каждой инициализации «обучать» всем разновидностям bb-кодов.

$code (в примере имеет значение ‘b’) Код, который нужно искать в тексте для обработки. Т.е. если указать код test , то потом в обрабатываемом тексте будет искаться тэг и обрабатываться в соответствии с указаниями в других параметрах рассматриваемой функции. $type (в примере имеет значение ‘simple_replace’) Указание того, как тэг должен обрабатываться (какого он типа). Есть различные предопределенные типы тэгов, которые будут описаны ниже. В нашем же примере указан тип ‘simple_replace’ который указывает на то, что тэг будет парным (открывающийся тэг [b] и закрывающийся ) и что эти тэги будут заменены на указанные ниже html тэги. $callback (в примере имеет значение null) Позволяет указать имя функции, которая должна будет вызваться при обработке найденного тэга в тексте. В случае с типом тэга ‘simple_replace’ такая функция не вызывается, и, соответственно, в этом параметре можно указать null. $params (в примере имеет значение array(‘start_tag’ => ‘‘, ‘end_tag’ => ‘ ‘)) В этом параметре в основном указывается, какой нужно вставлять html тэг взамен bb тэга. Наименование параметров напрямую зависит от того, какой тип тэга мы указали в параметре $type. $content_type (в примере имеет значение ‘inline’) Тип внутреннего содержимого тега. Может принимать значения: ‘inline’, ‘block’, ‘link’, ‘image’. Если я не ошибаюсь, можно прописывать и свои типы чтобы потом можно было указывать для этого содержимого свои индивидуальные фильтры (пример использования фильтров смотрите ниже). $allowed_in (в примере имеет значение array (‘block’, ‘inline’)) В этом параметре можно указать, внутри каких типов объектов может находиться создаваемый bb-код (его обработка будет просто игнорироваться в ином случае). В нашем примере мы указали, что элемент может находиться как внутри блочных элементов, так и внутри линейных. $not_allowed_in (в примере имеет значение array ()) Имеет назначение, противоположное по смыслу предыдущему параметру.

Виды обработки тэгов

Описание вариантов значения параметра $type в функции addCode.

‘simple_replace’ Описывает простой парный тэг. При использовании этого типа обработки тэга в параметре функции ‘params’ должны обязательно присутствовать две ячейки: $params[‘start_tag’] и $params[‘end_tag’]. ‘start_tag’ должен в себе содержать аналог открывающегося тэга в хтмл, а ‘end_tag’ – закрывающегося тэга соответственно. ‘simple_replace_single’ То же самое, что ‘simple_replace’, но используется только лишь для одинарных тэгов, которые, собственно говоря, не имеют содержимого (типа br, hr и т.п.). Требует наличия только параметра $params[‘start_tag’]. ‘callback_replace’ При этом типе вы перекладываете на себя обработку по найденным совпадениям (с помощью своей callback функции) для парного тэга. ‘callback_replace_single’ То же самое, что и ‘callback_replace’, но только для одинарных тэгов. ‘usecontent’ То же самое что и ‘callback_replace’, только в содержимом такого тэга другие тэги не будут обрабатываться, например, это удобно для тэга code. ‘usecontent?’ Этот тип может себя вести как ‘usecontent’ или же как ‘callback_replace’ в зависимости от ситуации. Актуальность того или иного варианта определяется за счет присутствия заранее предполагаемого атрибута в bb тэге. Если атрибут найден, то будет использоваться обработка ‘callback_replace’, в другом случае тэг будет обрабатываться как ‘usecontent’. Имя атрибута для поиска указывается через параметр $params[‘usecontent_param’]. Если указано имя default, то подразумевается значение атрибута, присвоенное непосредственно тэгу, например, , значением атрибута default будет текст «http://link». Этот прием часто используется, например, для тэга . Этот тэг может использоваться в двух формах: http://www.example.com/ и Текст ссылки, а так же [b]жирный текст. В первом случае будет использоваться тип ‘usecontent’, т.к. текст ссылки должен выводиться без какого-либо форматирования (и, собственно, сама ссылка будет некорректна, если в ней будут посторонние символы). В другом случае должен быть использован тип ‘callback_replace’, т.к. сама ссылка передается отдельным параметром, а текст, обрамленный в ссылку, вполне может содержать в себе какое-то форматирование.
Примечание: Можно указать несколько параметров для их поиска, для чего в $params[‘usecontent_param’] нужно передать не строку, а массив, содержащий строки. Например: $bbcode->addCode (…, array(‘usecontent_param’ => array (‘parameter1’, ‘parameter2’)), …);. ‘callback_replace?’ Является противоположным вариантом типа ‘usecontent?’. Если один из атрибутов, указанных в usecontent_param, встречается в тэге, он будет обработан как ‘usecontent’, в противном случае как ‘callback_replace’.

Пример кода из «боевых» условий

Вот пример файла index.php с более расширенной конфигурацией класса для обрабатывания большего числа тэгов, в нем же и можно понять, как работают callback функции и т.п.:

< ?php //Вставляем файл библиотеки require_once "bbcode/stringparser_bbcode.class.php"; //Приводит разнообразные переводы строк //разных операционных систем в единый формат (\n) function convertlinebreaks ($text) { return preg_replace ("/\015\012|\015|\012/", "\n", $text); } //Удалить все символы, кроме переводов строк function bbcode_stripcontents ($text) { return preg_replace ("/[^\n]/", "", $text); } //Функция для обработки ссылок function do_bbcode_url ($action, $attributes, $content, $params, $node_object) { if (!isset ($attributes["default"])) { $url = $content; $text = htmlspecialchars ($content); } else { $url = $attributes["default"]; $text = $content; } //Часть функции, которая занимается //только валидацией данных тэга if ($action == "validate") { if (substr ($url, 0, 5) == "data:" || substr ($url, 0, 5) == "file:" || substr ($url, 0, 11) == "javascript:" || substr ($url, 0, 4) == "jar:") { return false; } return true; } //Непосредственное преобразование тэга в //html вариант с возвращением результата return "".$text.""; } // Функция для вставки изображений function do_bbcode_img ($action, $attributes, $content, $params, $node_object) { //Часть функции, которая занимается //только валидацией данных тэга if ($action == "validate") { if (substr ($content, 0, 5) == "data:" || substr ($content, 0, 5) == "file:" || substr ($content, 0, 11) == "javascript:" || substr ($content, 0, 4) == "jar:") { return false; } return true; } //Непосредственное преобразование тэга в //html вариант с возвращением результата return ""; } //Создаем объект класса StringParser_BBCode $bbcode = new StringParser_BBCode(); //Добавляем фильтр (подробнее см. офф. документацию), //задействуя нашу функцию convertlinebreaks, которая будет //преобразовывать переводы строки в тексте к единому $bbcode->addFilter (STRINGPARSER_FILTER_PRE, "convertlinebreaks"); //Добавляем свои парсеры для разных типов объектов //(подробнее см. офф. документацию) //Мы указываем, через какую функцию должно пройти //содержимое этих тэгов, например, через функцию //htmlspecialchars для предотвращения XSS и т.д. $bbcode->addParser (array ("block", "inline", "link", "listitem"), "htmlspecialchars"); $bbcode->addParser (array ("block", "inline", "link", "listitem"), "nl2br"); $bbcode->addParser ("list", "bbcode_stripcontents"); //Добавляем bb-код , используемый в виде: //Текст заголовка первого уровня $bbcode->addCode ("h1", "simple_replace", null, array ("start_tag" => "

", "end_tag" => "