BBCode Preview

Посмотреть инструкцию

Обзор редактора

Этот редактор — это инструмент для создания и предварительного просмотра текста, размеченного BBCode. Он идеально подходит для составления сообщений на форумах, в блогах или на любых других платформах, которые поддерживают этот язык разметки. Все, что вы вводите, мгновенно отображается в блоке предпросмотра, а функция автоматического сохранения защищает вашу работу от случайной потери.

Как работает сохранение

Вам не нужно беспокоиться о сохранении. Редактор автоматически сохраняет ваше содержимое в локальное хранилище (LocalStorage) вашего браузера.

  • Что это значит? Это значит, что текст сохраняется прямо на вашем компьютере. Даже если вы случайно закроете вкладку, обновите страницу или даже выключите компьютер, ваш текст будет ждать вас, когда вы снова откроете редактор.

  • Где хранятся данные? Данные хранятся только в вашем браузере и не отправляются на какой-либо сервер. Это делает процесс быстрым и безопасным.

  • Когда данные могут быть удалены? Если вы вручную очистите кэш, файлы cookie или локальное хранилище своего браузера, сохраненный черновик будет удален.

Полный список BBCode тегов и их атрибутов

Ниже представлен полный список всех доступных тегов с примерами и пояснениями.

1. Основное форматирование текста

  • [B]Text[/B] — Делает текст жирным.
  • [I] Text [/I] — Делает текст курсивом.
  • [U] Text [/U] — Делает текст подчеркнутым.
  • [S]Text[/S] — Делает текст зачеркнутым.
  • [COLOR=#...]Text[/COLOR — Изменяет цвет текста.
    • Атрибут: Принимает название цвета (red, blue, green) или HEX-код (#FF5733).
    • Пример: [COLOR=green]Зеленый текст[/COLOR]
  • [SIZE=...] Text [/SIZE] — Изменяет размер текста.
    • Атрибут: Принимает число от 1 до 7.
    • 1— самый маленький размер (8px).
    • 7 — самый большой размер (26px).
    • Пример: [SIZE=5]Крупный текст[/SIZE]
  • [FONT=...]Text[/FONT] — Изменяет шрифт текста.
    • Атрибут: Принимает название шрифта, например: Arial, Verdana, Times New Roman.
    • Пример: [FONT=Verdana]Текст шрифтом Verdana[/FONT]
  • [H]...[/H]— Превращает текст в заголовок.

2. Блочные элементы и выравнивание

  • [CENTER]...[/CENTER] — Выравнивает блок текста по центру.
  • [LEFT]...[/LEFT] — Выравнивает блок текста по левому краю.
  • [RIGHT]...[/RIGHT] — Выравнивает блок текста по правому краю.
  • [FLOAT_LEFT]...[/FLOAT_LEFT] — Прижимает блок к левому краю, позволяя тексту обтекать его справа.
  • [FLOAT_RIGHT]...[/FLOAT_RIGHT] — Прижимает блок к правому краю, позволяя тексту обтекать его слева.
  • [CODE]...[/CODE] — Создает блок для отображения кода. Текст внутри не форматируется и сохраняет все пробелы и переносы.
  • [PLAIN]...[/PLAIN] — Отображает содержимое как есть, игнорируя все BBCode-теги внутри.

3. Медиа и интерактивные элементы

  • [IMG]...[/IMG] — Вставляет изображение.
    • Атрибут: URL-адрес изображения.
    • Пример: [IMG]https://i.imgur.com/image.png[/IMG]
  • [URL]...[/URL] или [URL=...]...[/URL] — Создает гиперссылку.
    • Атрибут: URL-адрес.
    • Пример: [URL=https://google.com]Перейти на Google[/URL]
  • [QUOTE]...[/QUOTE] или [QUOTE=...]...[/QUOTE] — Создает блок цитаты.
    • Атрибут: Имя пользователя, которого вы цитируете (опционально).
  • [SPOILER]...[/SPOILER] или [SPOILER=Название]...[/SPOILER] — Скрывает содержимое, которое становится видимым по клику.
    • Атрибут: Заголовок спойлера (опционально).

4. Информационные блоки и иконки

  • [ALERT]...[/ALERT] — Создает информационный блок с рамкой.
  • [IMPORTANT]...[/IMPORTANT], [NOTE]...[/NOTE], [TIP]...[/TIP], [XFIWARNING]...[/XFIWARNING] — Создают специализированные блоки с иконками для предупреждений, заметок и советов.
  • [FA]...[/FA] — Вставляет иконку из библиотеки Font Awesome.
    • Атрибут: Название иконки.
    • Пример: [FA]star[/FA] (для иконки звездочки)

5. Работа с таблицами

BBCode-таблицы — это мощный инструмент для структурирования контента. Каждый тег таблицы имеет определенную роль.

  • [TABLE=...][/... — Основной тег для создания таблицы.
    • Атрибуты: Принимает несколько атрибутов через запятую.
    • width: ширина таблицы (25%, 400px).
    • align: выравнивание таблицы на странице (left, center, right).
    • border-width: толщина внешней рамки (2px).
    • border-color: цвет внешней рамки (#f11606).
    • bgcolor: цвет фона таблицы (#fff9ed).
    • Пример: [TABLE="width: 100%, align: center, border-width: 3px, border-color: red"]
  • [TR]...[/TR] — Определяет строку таблицы.
  • [TD=...][/... — Определяет стандартную ячейку.
    • Атрибуты:
      • align: выравнивание содержимого ячейки (left, center, right).
      • colspan: объединяет ячейки по горизонтали.
      • rowspan: объединяет ячейки по вертикали.
      • width: ширина ячейки.
      • bgcolor: цвет фона ячейки.
  • [TH=...][/... — Определяет ячейку заголовка. Принимает те же атрибуты, что и [TD].