Как сделать свои BB-коды для сайта / форума По большому счёту, тема обсосана со всех, с каких только можно, сторон, однако до сих пор возникают вопросы. Некоторые из них хочу рассмотреть более подробно и с примерами. Вся операция "Внедрение своих BB-кодов на сайт” сводится к простой последовательности простых действий. Давайте, рассмотрим их пошагово: 1. Добавление самой кнопки новых BB-кодов. 2. Установка скрипта обработчика при добавлении BB-кодов. 3. Установка скрипта обработчика BB-кодов в материалах/постах. Добавление самой кнопки новых BB-кодов Итак, кнопка представляет собой, в простейшем варианте, простой инпут (< input />), или картинку с прописанным к ней событием onclick(); Вставляется она в шаблон - «Форма добавления сообщения», обычно, после оператора, выводящего BB-коды - $BBCODES$ (имеются в виду сайты в системе uCoz).Вот её примерный (стандартный) код. Для кнопки:
Установка скрипта обработчика при добавлении BB-кодов Для форума, на котором по умолчанию уже присутствует данный скрипт, устанавливать дополнительные скрипты для добавления BB-кодов не требуется. Но, если «вдруг», то вот ссылка на него: bbcodes.js Подключается он как и обычно, ссылкой на файл:
Установка скрипта обработчика BB-кодов в материалах/постах Сам скрипт обработчик - считывает контент блока с текстом (комментарием, постом) и ищет в нём определённые, заранее заданные в скрипте BB-коды, а найдя их - заменяет на их HTML-эквивалент, котрый тоже задаётся в самом скрипте. Ниже - будут конкретные примеры, а пока - вот стандартный скрипт обработчика: Скрипт с использованием библиотеки jQuery:
[greenmun]Где: ('[bbcode]') - стартовый BB-код. ('bbcode') - его стартовое HTML представление (если не понятно - ниже будет пример). ('[/bbcode]') - закрывающий BB-код. ('/bbcode') - закрывающая часть HTML представления этого BB-кода.[/greenmun]Скрипт обработчик вставляется в шаблон страницы после контента, подверженного обработке. То есть, если контент на форуме (имеются в виду сайты в системе uCoz) выводится оператором $BODY$, то скрипт добавляется в шаблон «Общий вид страниц форума», после $BODY$. И тоже, через условие, проверяющее является ли страница страницей с постами, то есть равняется ли оператор $PAGE_ID$ данной страницы значению «threadpage».
А вот теперь, предлагаю рассмотреть конкретный пример. Допустим, хотим сделать блок «Инфо», оформленный фоновым цветом, бордером и картинкой-иконкой, и чтобы вставлялся он BB-кодами [ info ] и [ /info ]. Поправим нашу кнопку - проставим выбранные BB-коды:
<fieldset style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;border:1px dashed #F36;border-left:2px solid #F00;background:#fafafa url(http://likbezz.ru/_theme/_st/img/ico/alert_ico.gif) no-repeat 4px 7px;"><legend style="color:#C00">Информация:</legend> Здесь будет текст, что находится между [ info ] и [ /info ] </fieldset>
В принципе, можно, задать блоку класс, и прописать его в CSS. Но, суть не в этом. Разделим этот блок (код блока), на начало блока, его содержание, и конец. Получается вот так:
Код
<fieldset style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;border:1px dashed #F36;border-left:2px solid #F00;background:#fafafa url(http://likbezz.ru/_theme/_st/img/ico/alert_ico.gif) no-repeat 4px 7px;"><legend style="color:#C00">Информация:</legend> Здесь будет текст, что находится между [ info ] и [ /info ] </fieldset>
Цитата
Где: < fieldset style="...">< legend style="...">Информация:< /legend > - это начало блока. Здесь будет текст - это содержание, что вы будете добавлять через форму. < /fieldset > - это - конец блока - закрывающий его див.
Отредактируем наш скрипт-обработчик - заменим BB-коды на свои, и их HTML-представление. Вот так:
){kind=link}