Главная » Статьи » Web-программирование » Java Script
Как сделать свои BB-коды для сайта / форума

По большому счёту, тема обсосана со всех, с каких только можно, сторон, однако до сих пор возникают вопросы. Некоторые из них хочу рассмотреть более подробно и с примерами.

Вся операция "Внедрение своих BB-кодов на сайт” сводится к простой последовательности простых действий.
Давайте, рассмотрим их пошагово:

  • 1. Добавление самой кнопки новых BB-кодов.
  • 2. Установка скрипта обработчика при добавлении BB-кодов.
  • 3. Установка скрипта обработчика BB-кодов в материалах/постах.

Добавление самой кнопки новых BB-кодов

Итак, кнопка представляет собой, в простейшем варианте, простой инпут (<input />), или картинку с прописанным к ней событием onclick();
Вставляется она в шаблон - «Форма добавления сообщения», обычно, после оператора, выводящего BB-коды - $BBCODES$ (имеются в виду сайты в системе uCoz).

Вот её примерный (стандартный) код.

Для кнопки:

Code (HTML)
<span style="padding-right:1px;">
<input type="button" class="codeButtons" onclick="simpletag('i','','','message','');return false;" value="i" title="Italic">
</span>

Где:

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

Для картинки:

Code (HTML)
<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

Подключается он как и обычно, ссылкой на файл:

Code (HTML)
<script type="text/javascript" src="http://src.ucoz.net/src/bbcodes.js"></script>


Установка скрипта обработчика BB-кодов в материалах/постах

Сам скрипт обработчик - считывает контент блока с текстом (комментарием, постом) и ищет в нём определённые, заранее заданные в скрипте BB-коды, а найдя их - заменяет на их HTML-эквивалент, котрый тоже задаётся в самом скрипте.

Ниже - будут конкретные примеры, а пока - вот стандартный скрипт обработчика:

Скрипт с использованием библиотеки jQuery:

Code (JavaScript)
<script type="text/javascript">
$('td.posttdMessage').each(function(){
$(this).html($(this).html().split('[bbcode]').join('bbcode').split('[/bbcode]').join('/bbcode'));
});
</script>

Скрипт обработчика BB-кодов на чистом JavaScript:

Code (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>

Где:

('[bbcode]') - стартовый BB-код.

('bbcode') - его стартовое HTML представление (если не понятно - ниже будет пример).

('[/bbcode]') - закрывающий BB-код.

('/bbcode') - закрывающая часть HTML представления этого BB-кода.


Скрипт обработчик вставляется в шаблон страницы после контента, подверженного обработке.

То есть, если контент на форуме (имеются в виду сайты в системе uCoz) выводится оператором $BODY$, то скрипт добавляется в шаблон «Общий вид страниц форума», после $BODY$.

И тоже, через условие, проверяющее является ли страница страницей с постами, то есть равняется ли оператор $PAGE_ID$ данной страницы значению «threadpage».


Смотреть код вставки в шаблон

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


А вот теперь, предлагаю рассмотреть конкретный пример.

Допустим, хотим сделать блок «Инфо», оформленный фоновым цветом, бордером и картинкой-иконкой, и чтобы вставлялся он BB-кодами [info] и  [/info].

Поправим нашу кнопку - проставим выбранные BB-коды:


Code (HTML)
<span style="padding-right:1px;"><input type="button" class="codeButtons" onclick="simpletag('info','','','message','');return false;" value="info" id="info" title="Блок «info»"></span>

Вот примерный HTML код подобного блока:


Code (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.

Но, суть не в этом.

Разделим этот блок (код блока), на начало блока, его содержание, и конец.

Получается вот так:


Code (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>

Где:

<fieldset style="..."><legend style="...">Информация:</legend> - это начало блока.

Здесь будет текст - это содержание, что вы будете добавлять через форму.

</fieldset> - это - конец блока - закрывающий его див.


Отредактируем наш скрипт-обработчик - заменим BB-коды на свои, и их HTML-представление.

Вот так:

Code (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('[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-коды вам будет легко и просто.


В итоге, блок с инфой должен выглядеть примерно вот так:



И вот так, при добавлении:



Само собой, стилевое оформление блока вы можете менять как хотите, добавлять картинки, фоновые изображения, рамки, границы прочее, и блоков можете сделать не один, а несколько, в разумных пределах, конечно.

 

Вопросы по теме обсуждаются на форуме «Вопрос по теме ... » в теме «Как сделать свои BB-коды для сайта / форума - обсуждения».


Автор: Likbezz aka Flesh




Источник: Внедрение своих BB-кодов на сайт, подробная инструкция с примерами, Добавление новых кнопок BBCODES
Категория: Java Script | Добавил: likbezz (12.03.2011)
Просмотров: 40736 | Комментарии: 29 | Теги: BBCodes, Добавление, внедрение, примерами, jQuery, кнопка, инструкция, кнопок, bbcodes.js, BB-кодов
Всего комментариев: 29« 1 2
0  
13  multik_ucoz_ua [Материал]  [27.02.2012]

Прописал id. Теперь всё СУППЕР!!! Спасибо за помощь и за полезную статейку (побольше б таких) biggrin smile

0  
9  multik_ucoz_ua [Материал]  [26.02.2012]

У меня проблема!!! Сделал всё как здесь(вставил кнопку и скрипт) но почему то кнопка появилась но сам скрипт не работает(открывающий ВВ код есть "[info]" а закрывающего "[/info]" нету sad ). Помогите разобраться в чем дело wacko

0  
10  likbezz [Материал]  [26.02.2012]

Quote (multik_ucoz_ua)
Помогите разобраться в чем дело

Ссылочку оставьте на страницу с кодом [info] ... посмотрю - скажу в чём дело )
...

0  
11  multik_ucoz_ua [Материал]  [27.02.2012]

Я пробовал сделать на форуме. Вот ссылка Ссылка на форум с [info]

0  
12  multik_ucoz_ua [Материал]  [27.02.2012]

Я разобрался!!! Всё работает!!! Просто при нажатии на кнопку [info] код открывается,но при повторном нажатии на неё(как в большинстве случаев) он не закрывается(приходиться вручную дописывать закрывающий код [/info],хотя это не удобно). В остальном всё работает отлично. smile

0  
7  Alex86 [Материал]  [27.08.2011]

Полезная статейка. И поучительная.

0  
5  MAGELLAN [Материал]  [18.07.2011]

Доброго дня!

Предлагаю посмотреть, как сея проблема решена на моём форуме (ВЕТЕР НАДЕЖДЫ), с помощью программного комплекса (BBComplex)

0  
6  likbezz [Материал]  [21.07.2011]

Quote (MAGELLAN)
Предлагаю посмотреть, как сея проблема решена на моём форуме (ВЕТЕР НАДЕЖДЫ), с помощью программного комплекса (BBComplex)

Это не совсем «проблема» )
Это для тех, кому не интересен готовый продукт, а интересно создавать что-то своё, уникальное, не ограниченное рамками “готового”. )

0  
4  K1l0 [Материал]  [28.05.2011]

отличная, доходчивая статья. Считайте что у вас еще один "почитатель".

0  
3  anger [Материал]  [25.05.2011]

шаб свой, ксс стандартный в плане операторов. только вот чуть поточней бы про то как это также

0  
1  anger [Материал]  [23.05.2011]

как сделать ББ код в новостях сайта? только обработчиком?

0  
2  likbezz [Материал]  [24.05.2011]

Quote (anger)
как сделать ББ код в новостях сайта? только обработчиком?

Точно также как и на форуме. Только классы элементов другие. В зависимости от дизайна. Если стандартный, то «cMessage» - блок с контентом.

0  
8  MoVeMix [Материал]  [27.11.2011]

а по подробнее можно, что и куда вставлять именно не для форума, а для добавления материала.

1-10 11-17
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]