Текст, якому за допомогою стилю можна змінювати властивості.

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

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

[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, який, судячи з усього, відмінно справляється зі своїм завданням (нічого кращого поки не бачив). Єдиний мінус у тому, що документація, представлена \u200b\u200bна сайті, не російською мовою. Цей мінус я і хочу побороти в цій статті, навівши приклад використання класу з російськими коментарями.

Для початку потрібно скачати бібліотеку (на момент написання статті версія бібліотеки була 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", , array ( "start_tag" \u003d\u003e " "," End_tag \u200b\u200b"\u003d\u003e"")," Inline ", array (" block "," inline "), array ()); // Обробляємо тестовий рядок і виводимо її в браузер echo $ bbcode-\u003e parse (" Тестовий текст, це слово має бути [b ] жирним ");?\u003e

функція 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') Вказівка \u200b\u200bтого, як тег повинен оброблятися (якого він типу). Є різні зумовлені типи тегів, які будуть описані нижче. У нашому ж прикладі зазначений тип 'simple_replace' який вказує на те, що тег буде парним (відкривається тег [b] і закривається) і що ці теги будуть замінені на такі html теги. $ Callback (в прикладі має значення null) Дозволяє вказати ім'я функції, яка повинна буде викликатися при обробці знайденого тега в тексті. У випадку з типом тега 'simple_replace' така функція не викликається, і, відповідно, в цьому параметрі можна вказати null. $ Params (в прикладі має значення array ( 'start_tag' \u003d\u003e ' ',' End_tag \u200b\u200b'\u003d\u003e'')) У цьому параметрі в основному вказується, який потрібно вставляти 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-\u003e addCode (..., array ( 'usecontent_param' \u003d\u003e 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 \u003d\u003d "validate") (if (substr ($ content, 0, 5) \u003d\u003d "data:" || substr ($ content, 0, 5) \u003d\u003d "file:" || substr ($ content, 0 , 11) \u003d\u003d "javascript:" || substr ($ content, 0, 4) \u003d\u003d "jar:") (return false;) return true;) // Безпосереднє перетворення тега в // html варіант з поверненням результату return " ";) // Створюємо об'єкт класу StringParser_BBCode $ bbcode \u003d new StringParser_BBCode (); // Додаємо фільтр (докладніше див. Офф. Документацію), // задіюючи нашу функцію convertlinebreaks, яка буде // перетворювати переклади рядка в тексті до єдиного $ bbcode -\u003e addFilter (STRINGPARSER_FILTER_PRE, "convertlinebreaks"); // Додаємо свої парсери для різних типів об'єктів // (докладніше див. офф. документацію) // Ми вказуємо, через яку функцію має пройти // вміст цих тегів, наприклад, через функцію // htmlspecialchars для запобігання XSS і т.д. $ bbcode-\u003e addParser (array ( "block", "inline", "link", "listitem"), "htmlspecialchars"); $ bbcode-\u003e addParser (array ( " block "," inline "," link ", "Listitem"), "nl2br"); $ bbcode-\u003e addParser ( "list", "bbcode_stripcontents"); // Додаємо bb-код, який використовується у вигляді: // Текст заголовка першого рівня $ bbcode-\u003e addCode ( "h1 "," simple_replace ", , array (" start_tag "\u003d\u003e"

"," End_tag \u200b\u200b"\u003d\u003e"

• Перший з них використовує тег . Після знака \u003d повинен вставлятися потрібну адресу URL. Наприклад, для створення посилання на сайт phpBB.com ви могли б використовувати:

  В кінцевому вигляді такої код буде виглядати так: Відвідайте сайт www.teosofia.ru! Посилання буде відкриватися в тому ж або в новому вікні, в залежності від налаштувань браузера користувача.

• Якщо ви хочете, щоб в якості тексту посилання показувався URL, то ви можете просто зробити наступне:

  http://www.teosofia.ru/

• Крім цього в phpBB впроваджена функція, звана автоматичні посилання. Ця функція перетворює будь-який синтаксично правильний URL в посилання без необхідності вказівки тегів і префікса http: //. Наприклад, введення в повідомлення фрази www.teosofia.ru призведе при перегляді цього повідомлення до автоматичної видачі www.teosofia.ru.
• Те ж саме відноситься і до адресами електронної пошти: ви можете вказати адресу в явному вигляді:

  [email protected]

  що видасть [email protected]  або просто ввести адресу [email protected] в повідомлення, і він буде автоматично перетворено при перегляді цього повідомлення.

http://www.teosofia.ru/my-picture.gif

не є коректною, що може привести до подальшого видалення вашого повідомлення. Будьте уважнішими.