Список BB-кодов форума

[ErikPshat]

Заголовок
Название BB кода
Замена
Пример
Описание

[ErikPshat]

DECOR - выделение фона цветом
decor
<span style="display: inline-block; background: {option}; border-radius: 5px; box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.400), 0px 0.9em 0.5em -0.2em rgba(255, 255, 255, 0.196) inset; font-weight: normal; padding: 0.2em 0.4em 0.2em;">{param}</span>
Выделение фона цветом
Для выделение фона текста цветом используйте bb-код [DECOR].
В окне опции введите цвет в формате #RRGGBB или название.

[ErikPshat]

Заголовок:
Spoiler

Название BB кода:
spoiler

Замена:
<div style="clear:both;margin: 15px 0px;"><div style="margin-bottom:2px"><input type="button" value="Открыть" style="width:64px;font-size:11px;margin:0px;padding:1px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Закрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Открыть'; }"> <b>{option}</b></div><div class="pagemessage" style="margin: 0px; padding: 6px; border: 1px inset;"> <div style="display: none;"> {param} </div></div></div>

Пример:
Скрытый текст

Описание:
Тег спойлера, который позволяет скрыть текст под определенным заголовком.

[ErikPshat]

Strike
S
<span style="text-decoration:line-through;">{param}</span>
Зачёркнутый текст
Зачёркнутый текст

[ErikPshat]

Горизонтальная линия
hr
<hr style="border-style: inset; border-width: 1px; box-sizing: content-box; display: block; height: 0px; margin: 0.5em auto;" />

Горизонтальная линия

[ErikPshat]

Оффтопик
OFF
<span><a href="#" title="Для просмотра текста оффтопа - жми сюда" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;"><img src="http://www.pspx.ru/forum/images/editor/offtop.gif" border="0"></a><div class="subblock" style="display: none">{param}</div></span>
Флуд не по теме
Скрывает текст оффтопа.

[ErikPshat]

Картинка с выравниванием
pic
<img style="float:{option}; margin:8px" src="{param}" alt="" />
http://www.pspx.ru/forum/images/smilies/russian.gifТекст обтекает картинку сбоку, не смещаясь ниже или выше.
Картинка с выравниванием и обтеканием текста, по левому краю или правому, или по центру.
Используйте опции LEFT, RIGHT, или CENTER.

[ErikPshat]

Бегущая строка
move
<marquee behavior="alternate" direction="right">{param}</marquee>
Бегущая строка
Движущийся текст

[ErikPshat]

YouTube Video
youtube
<iframe width="640" height="360" src="http://www.youtube.com/embed/{param}" frameborder="0" allowfullscreen></iframe>
8hjP9nmo7WA
Вставка ID видеоролика с сайта youtube.com в видеоплейер на форуме.

[ErikPshat]

Учитывать пробелы
space
<span style="white-space: pre-wrap">{param}</span>
Пробелы учитываются
Данный тег учитывает пробелы и переносы

[ErikPshat]

Подсветка текста
backlight
<span style="background: #ff6600; color: white; padding: 0px 4px 2px; text-shadow: 1px 1px 1px #777; border-radius: 3px;">{param}</span>
Привет мир!
Выделение текста фоновым цветом

[ErikPshat]

Flash
flash
<embed src="{param}" {option} allowScriptAccess ="never" type="application/x-shockwave-flash"><param name="wmode" value="transparent" /></embed>
http://www.yapfiles.ru/files/1097586/happy_bithday.swf
Вставка Flash SWF в сообщение.

[ErikPshat]

Мультимедиа
media
<div class="bbmedia" data-url="{param}" data-args="{option}" style="margin: 1px; display: inline-block; vertical-align: bottom;"><div style="width: 200px; height: 40px; border: 1px solid #999; display: table-cell; text-align: center; vertical-align: middle; font: 10px/10px Verdana; color: #555; opacity: 0.5;"><a style="color: #105289; text-decoration: none;" href="http://vrublevsky.org/bbmedia/vbulletin/media/" target="_blank">vBulletin [media]</a></div><script>if (typeof bbmedia == "undefined") { bbmedia = true; var e = document.createElement("script"); e.charset="utf-8"; e.async = true; e.src = "http://phpbbex.com/api/bbmedia.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(e, s); }</script></div>
http://youtu.be/8cavNK87h3s
Вставить аудио, видео, карту или панораму с указанием предпочитаемых размеров плеера

[ErikPshat]

FLOAT - выравнивание блока с обтеканием
float
<span style="float:{option};">{param}</span>
ЭТОТ БЛОК СПРАВАА этот блок обтекает его

Обтекание блоков. В запрос ввода опции вводите один из следующих возможных параметров: left | right | none | inherit, где left - выравнивает блок по левому краю, right - по правому, none - нет, inherit - наследует параметры от родителя.

[ErikPshat]

Якорь-гиперссылка
anchor
<a href="{option}">{param}</a>
Перейти к тексту
В опциях выставляете уникальный номер или сочетание слов, на которыое будет осуществлён переход

[ErikPshat]

Таблица - строка
tr
<tr {option}>{param}</tr>
Одна строка
TR - служит контейнером для ячеек горизонтальной строки таблицы.

[ErikPshat]

Таблица - ячейка
td
<td {option}>{param}</td>
1 ячейка2 ячейка3 ячейка
TD - предназначен для создания одной ячейки таблицы.

[ErikPshat]

Таблица
table
<table {option}>{param}</table>
123456789
Table - служит контейнером для таблицы.

[ErikPshat]

Таблица - колонка
colgroup
<colgroup {option}>{param}</colgroup>
09:0013:00завтракобед
colgroup предназначен для задания ширины и стиля одной или нескольких колонок таблицы.

[ErikPshat]

Якорь переход
anchorid
<a id="{param}"></a>
Пункт №1 Пункт №1
Якорь, куда должна быть произведена прокрутка страницы или переход по ссылке

[ErikPshat]

RESIZE - миниатюра изображения
resize
<span class="inlineimg" style="display: inline-block; background: url({param}); background-size: cover; width: 200px; height: 114px; border-radius: 5px; box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.400), 0px 0.9em 0.5em -0.2em rgba(255, 255, 255, 0.196) inset; padding: 0.2em 0.2em 0.2em; margin: 8px;"><table align="right"><tr><td><a href="{param}" target="_blank"><img src="http://www.pspx.ru/forum/images/icons/loading.gif" alt="Нажмите для увеличения" title="Нажмите для увеличения" /></a></td></tr></table></span>
http://www.pspx.ru/forum/attachment.php?attachmentid=7915
Уменьшает крупное изображение и отображает миниатюру в сообщениях. Увеличение по клику на лупу.

[ErikPshat]

Video Resized (YouTube.com, VideoBash.com и пр.)
youtres
<iframe {option} src="{param}" frameborder="0" allowfullscreen></iframe>
https://www.youtube.com/embed/8hjP9nmo7WA
Вставка URL с видеохостингов с возможностью указания своего размера по ширине и высоте опциями [width=480 height=270]. Ссылка между тегами должна быть прямая и полная (не ID ссылки, а Embed формата), например: https://www.youtube.com/embed/8hjP9nmo7WA

[ErikPshat]

Стили таблиц Excel
style
<style type="text/css">{param}</style>
.xl017078 {border:3px solid #ff0000;color:blue;font-size:18px;font-weight:700;}Привет!
Стили CSS для таблиц Excel

[ErikPshat]

Стили тега SPAN
span
<span {option}>{param}</span>
Привет!
Обрамление стилями в строчных данных

[ErikPshat]

headinclude

<!-- jQuery -->
<script type="text/javascript" src="AnythingSlider/js/jquery.min.js"></script>

<!-- Anything Slider -->
<link rel="stylesheet" href="AnythingSlider/css/anythingslider.css">
<link rel="stylesheet" href="AnythingSlider/Themes/css/theme-simple2.css">
<script type="text/javascript" src="AnythingSlider/js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="AnythingSlider/js/jquery.anythingslider.fx.min.js"></script>
<script type="text/javascript" src="AnythingSlider/Themes/js/theme-simple.min2.js"></script>


Слайдер картинок [размер]

slidersize

<style type="text/css">
#slider2 img {{option};}
#slider2 {{option};list-style:none;overflow-y:auto;overflow-x:hidden;}
</style>
<div><ul id="slider2">{param}</ul><div id="bkgd"></div></div>

http://www.bbcode.org/images/lubeck_small.jpg

Вставка нескольких картинок в слайдшоу. В опцию вписываем уникальное название слайдера и затем между тегами вставляем поочерёдно картинки в опции другого тега [slider].

[ErikPshat]

Слайдер картинок [Описание]

slider

<li>
<div class="caption-top">{option} <a target="_blank" href="{param}" alt="Показать в полный размер" title="Показать в полный размер"> ***</a></div>
<img src="{param}" alt="{option}" />
</li>

http://www.bbcode.org/images/lubeck_small.jpg

Вставляем между тегами URL картинки, а в опцию вписываем её описание.

[Yoti]

1) Неплохо бы иметь спойлер без заголовка.
2) У меня не работает код "Удалить ссылку".

[ErikPshat]

Yoti,
1) Это не проблема. А вообще можно было сделать спойлеры баяном, сейчас это новое веяние в связи с мощным расширением формата CSS.
А в таком виде не пойдёт? -
1) Это не проблема. А вообще можно было сделать спойлеры баяном, сейчас это новое веяние в связи с мощным расширением формата CSS.Или нужно вообще без кнопки Открыть/Закрыть?

2) http://www.pspx.ru/forum/cleardoc/editor/unlink.gif - он работает, как и все остальные бб-коды. Например, чтобы обрамить текст жирностью или сделать списком, нужно сначала его выделить, потом нажать на кнопку жирности или списка. Точно так же здесь работает. Чтобы убрать ссылку, нужно выделить ссылку с обрамлённым ею текстом, затем нажать кнопочку, ссылка должна удалиться.

[in1975]

он работает,
подтверждаю, работает. Я тоже не понял вопроса :)

[Yoti]

ErikPshat,
in1975,
ага, понял. Спутал с другим движком принцип.

Если нажать на кнопку спойлера, ничего не вводить и нажать ОК, то тэг не появляется.

[ErikPshat]

Yoti, ага, я так и понял, поэтому написал подробное разъяснение. На других форумах или торрент-трекерах, это реализовано по другому, там при нажатии кнопки удаляются вообще все ссылки в сообщении или вроде все ББ-коды, как-то так.

И я так понял, что ты хочешь спойлер как на трекерах, т.е. текст пишется посреди спойлера. Ибо без кнопки Открыть/Закрыть вообще невозможно будет открыть спойлер :D

Yoti, кстати, посмотри на спойлеры в этой раздече: https://rutracker.org/forum/viewtopic.php?t=2031202
Особенно на первую часть в шапке:
Полностью портативная версия раздачи в HTML, не требующая подключения к интернету (скриншоты были оптимизированы по весу на 50% (без видимой потери качества)).
А так же, все картинки присутствуют локально и будут грузится с компьютера.

Для любителей и нелюбителей спойлеров 3 версии:

PSX-PSP_Collection_Lite.htm - Каждая игра в отдельном спойлере.
PSX-PSP_Collection_Medium.htm - Игры в спойлерах по алфавиту.
PSX-PSP_Collection_VeryHard.htm - Все игры в открытом виде, вообще без спойлеров. Более 600 одновременно открытых картинок, будут грузиться ооочень долго. ))))

Загруть можно без ожидания и без ввода капчи отсюда (http://yadi.sk/d/tz1KKpVr1BVy4) или отсюда (http://www.mediafire.com/?wtddnwuueb4v167). (осторожно! 21.46 MB)
Скачай мою HTML-версию раздачи и посмотри как там реализованы спойлеры :)

[Yoti]

текст пишется посреди спойлера
Нет.

в таком виде не пойдёт?
Именно то, что нужно!
Но, [SPOILER=""] ты руками ввёл, выходит? Хотелось бы автоматом.

Лол, в теге код пропали знаки после слова спойлер. Тоже косяк. В коде не должны быть никакие изменения, ибо тогда он может не скомпилироваться/не запуститься.

[ErikPshat]

ты руками ввёл, выходит?
Нет, просто в окне ввода опции для спойлера ничего не вводим. Хотя, если ничего не ввести, то вставка тега проигнорируется, поэтому вводим что-нибудь, например 1, а затем просто между кавычками удаляем единичку. Получится так: [spoiler=""] (пустые кавычки).

Да, в теге кода не должно быть обработки ББ-кодов. Это я так выставил, чтобы ББ-коды всё-таки там обрабатывались. Так просто удобнее выходило, не помню, для чего это нужно было, но было решено сделать именно так. Это можно отключить через админку.

Со спойлером тоже можно глянуть, возможно там выставлено не применять ББ-код, если отсутствует текст.

[ErikPshat]

Кстати, а вот в коде CODE предлагаю вообще убрать справа - Код: Выделить
Ибо выделение всё равно не работает, да и не удобно идёт большой отступ из-за этой кнопки выделения.

[Yoti]

Это можно отключить через админку.
Желательно.

Со спойлером тоже можно глянуть
Нужно.

предлагаю вообще убрать справа
Я никогда её не нажимал)

[ErikPshat]

Нужно
В ообщем, зачем что-то мутить. Просто оставляй в названии спойлера кавычки пустыми.

Начёт CODE, если не нужны ББ-коды в коде, тогда обрамляй этим http://www.pspx.ru/forum/cleardoc/editor/noparse.gif ...

[Yoti]

Начёт CODE, если не нужны ББ-коды в коде, тогда обрамляй этим ...
Тест 1:
[SPOILER=""]
Тест 2:
[SPOILER=""]

[in1975]

Yoti, И? Закрывать спойлеры вас не учили? И если у Вас сначала идет code, а потом NOPARSE, то чего Вы ожидаете?

[Yoti]

in1975,
мне не нужно закрывать спойлер, ибо в нём ничего нет.

[in1975]

вот пустой
1.
с кодом:
2.

Или я не понимаю чего вы хотите...

[ErikPshat]

in1975, он просто проверяет, что кавычки пропадают. С NOPARSE внутри бб-коды игнорируются. А вот если снаружи вокруг NOPARSE, тогда наружные бб-коды применяются к игнорируемым.
Можно было и так проверить:





Снаружи жирность и покраснение:

[Yoti]

Изпользовал noparse, но содержимое кода покорёжено цветами и начертанием. Вот пример:
url https://nopaystation.com/pkgi
В начале текст белый и ровный, а затем зелёный и курсивный, чего мне абсолютно не нужно.
Эта строчка должна копироваться как есть, а с выделением юзверь спокойно может запутаться.

[ErikPshat]

Yoti, ну и что я могу сделать? Это так работает подсветка синтаксиса в коде.
Две косые черты определяются как комментарий, поэтому подсвечивается зелёным )))
.hljs-comment,.hljs-quote{color:#DCDCDC;font-style:normal}
Давай тогда делай исключения для подобных случаев. Подключи к сообщению стиль: такая кнопка http://www.pspx.ru/forum/cleardoc/editor/css.gif

.hljs-comment,.hljs-quote{color:#DCDCDC;font-style:normal}

То есть, .hljs - это типа плагин подсветки синтаксиса, а точка спереди - это класс, как он активируется на странице. Мы в данном случае принудительно выставили для комментов беловатый цвет и нормальный стиль шрифта (не наклонный). Но в таком случае, это будет действовать на всю страницу, где будет присутствовать подсветка синтаксиса .hljs.

url https://nopaystation.com/pkgi

[Yoti]

А какой-то команды для выключения прочих влияний, помимо комментов, есть? NOSTYLE какой-нибудь?

[ErikPshat]

Yoti, это отлавливается правой кнопкой "Просмотреть код" по тому месту, где проявляется что-то не так.

Команд довольно много.