• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Как сделать свои BB-коды для сайта / форума
Как сделать свои BB-коды для сайта / форума
XemorDioДата: Понедельник, 04.04.2016, 12:28 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Offline
Как сделать свои BB-коды для сайта / форума
По большому счёту, тема обсосана со всех, с каких только можно, сторон, однако до сих пор возникают вопросы. Некоторые из них хочу рассмотреть более подробно и с примерами.
Вся операция "Внедрение своих BB-кодов на сайт” сводится к простой последовательности простых действий.
Давайте, рассмотрим их пошагово:
1. Добавление самой кнопки новых BB-кодов.
2. Установка скрипта обработчика при добавлении BB-кодов.
3. Установка скрипта обработчика BB-кодов в материалах/постах.

Добавление самой кнопки новых BB-кодов
Итак, кнопка представляет собой, в простейшем варианте, простой инпут (< input />), или картинку с прописанным к ней событием onclick();
Вставляется она в шаблон - «Форма добавления сообщения», обычно, после оператора, выводящего BB-коды - $BBCODES$ (имеются в виду сайты в системе uCoz).
Вот её примерный (стандартный) код.
Для кнопки:
Код
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="simpletag('i','','','message','');return false;" value="i" title="Italic">
</span>

Где:
Код
<span /> - для визуального разделения кнопок между собой.

Для картинки:
Код
<span style="padding-right:1px;">
<img class="codeButtImg" onclick="simpletag('bbcode','','','message','');return false;" src="/_content/_publ/2011/bb-code/bb.png" width="57" height="18" title="bbcode" alt="bbcode" />
</span>

Где:
Код
class="codeButtImg" - класс для оформления картинки через CSS - не обязательный параметр.

Кнопочки, как и отмечено выше, вставляются в шаблон, после оператора $BBCODES$, через условие, проверяющее, разрешены ли BB-коды вообще.
Вот так:

Установка скрипта обработчика при добавлении BB-кодов
Для форума, на котором по умолчанию уже присутствует данный скрипт, устанавливать дополнительные скрипты для добавления BB-кодов не требуется.
Но, если «вдруг», то вот ссылка на него: bbcodes.js
Подключается он как и обычно, ссылкой на файл:
Код
<script type="text/javascript" src="http://src.ucoz.net/src/bbcodes.js"></script>

Установка скрипта обработчика BB-кодов в материалах/постах
Сам скрипт обработчик - считывает контент блока с текстом (комментарием, постом) и ищет в нём определённые, заранее заданные в скрипте BB-коды, а найдя их - заменяет на их HTML-эквивалент, котрый тоже задаётся в самом скрипте.
Ниже - будут конкретные примеры, а пока - вот стандартный скрипт обработчика:
Скрипт с использованием библиотеки jQuery:
Код
<script type="text/javascript">
$('td.posttdMessage').each(function(){
$(this).html($(this).html().split('[bbcode]').join('bbcode').split('[/bbcode]').join('/bbcode'));
});
</script>

Скрипт обработчика BB-кодов на чистом JavaScript:
Код
<script type="text/javascript">
e=document.getElementsByTagName("TD");
for(k=15;k<e.length;k++){     
if(e[k].className=='posttdMessage'){
s=e[k].innerHTML;
while(s.indexOf('[bbcode]')!=-1){
s=s.replace('[bbcode]','bbcode');s=s.replace('[/bbcode]','/bbcode');
e[k].innerHTML=s;
}
}};     
</script>

[greenmun]Где:
('[bbcode]') - стартовый BB-код.
('bbcode') - его стартовое HTML представление (если не понятно - ниже будет пример).
('[/bbcode]') - закрывающий BB-код.
('/bbcode') - закрывающая часть HTML представления этого BB-кода.[/greenmun]
Скрипт обработчик вставляется в шаблон страницы после контента, подверженного обработке.
То есть, если контент на форуме (имеются в виду сайты в системе uCoz) выводится оператором $BODY$, то скрипт добавляется в шаблон «Общий вид страниц форума», после $BODY$.
И тоже, через условие, проверяющее является ли страница страницей с постами, то есть равняется ли оператор $PAGE_ID$ данной страницы значению «threadpage».

В принципе - это всё.

А вот теперь, предлагаю рассмотреть конкретный пример.
Допустим, хотим сделать блок «Инфо», оформленный фоновым цветом, бордером и картинкой-иконкой, и чтобы вставлялся он BB-кодами [ info ] и [ /info ].
Поправим нашу кнопку - проставим выбранные BB-коды:
Код
<span style="padding-right:1px;"><input type="button" class="codeButtons" onclick="simpletag('info','','','message','');return false;" value="info" id="info" title="Блок «info»"></span>

Вот примерный HTML код подобного блока:
Код
<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-представление.
Вот так:
Код
<script type="text/javascript">
e=document.getElementsByTagName("TD");
for(k=15;k<e.length;k++){     
if(e[k].className=='posttdMessage'){
s=e[k].innerHTML;
while(s.indexOf('[ info ]')!=-1){
s=s.replace('[ info ]','<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>');s=s.replace('[ /info ]','</fieldset>');
e[k].innerHTML=s;
}}};     
</script>

Внимательно посмотрите, и постарайтесь понять куда что подставляется.
Так как, если поймёте - сделать любые свои BB-коды вам будет легко и просто.

 
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Как сделать свои BB-коды для сайта / форума
  • Страница 1 из 1
  • 1
Поиск:
Поделись с другими сталкерами
Меню сайта
Гость
Статистика
Рейтинг@Mail.ru