Главная » Статьи » 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)
Просмотров: 41078 | Комментарии: 29 | Теги: BBCodes, Добавление, внедрение, примерами, jQuery, кнопка, инструкция, кнопок, bbcodes.js, BB-кодов
Всего комментариев: 291 2 »
0  
28  foksin [Материал]  [08.07.2015]

Подскажите пожалуйста как реализовать таблицу на форуме, нужен скрипт, не подскажите какой?

0  
29  likbezz [Материал]  [12.07.2015]

Цитата foksin
Подскажите пожалуйста как реализовать таблицу на форуме, нужен скрипт, не подскажите какой?

BBComplex - JavaScript модуль для сайтов системы uCoz

0  
27  XCanG [Материал]  [27.10.2013]

Хмм, многие люди уже знают именно такой вариант статьи. Но вот вопрос заключается в более сложном бб-коде, где, например нужно использовать 3 параметра (два для настройки и один для контента), при чём возможно нужна проверка для содержания кода.
Вот, например, как сделать такой код:

[fvideo=a;b]url[/fvideo] или альтернатива [fvideo width=a height=b]url[/fvideo]
где, a и b - параметры высоты и ширины, а для url идёт проверка параметров, ну например если http(s)://(www.)youtube.com/watch?v=, то заменяется на <iframe src="//www.youtube.com/embed/
Если, например, http(s)://(www.)vimeo.com/, то заменяется на <iframe src="//player.vimeo.com/video/ ну и пр варианты.
Плюс добавляются 2 параметра width= и height= (и их значения, возможно, ещё помещаются в кавычки "") и они проверяются, что не меньше 50 и не больше 960 и в ином случае подставляются крайние значения, например.

Кроме того интересует статья, как заменять уже имеющиеся BB коды, то есть заменить html-коды у тегов code, quote, url, audio, video...

0  
25  Давид [Материал]  [12.09.2012]

Здраствуйте я всё прочитал , но не нашол то что мне нужно!
Вообщем мне нужна кнопка в каталог файлов "при добавление материала" которая при выделение текста будет обводить его кодом <div id="blue">Тут выделенный текст</div>
Заранее спасибо!

0  
26  Mr_Smith [Материал]  [12.09.2012]

Quote (Давид)
Здраствуйте я всё прочитал , но не нашол то что мне нужно!

Очень жаль.

Quote (Давид)
Вообщем мне нужна кнопка в каталог файлов ...

С этим вот сюда: https://www.free-lance.ru/

0  
23  ♪НеЗнакомкА♫ [Материал]  [26.07.2012]

Скажите, пожалуйста, почему в комментариях я могу пользоваться этим bb-кодом, а создавая тему - нет?

0  
24  likbezz [Материал]  [26.07.2012]

Quote (♪НеЗнакомкА♫)
Скажите, пожалуйста, почему в комментариях я могу пользоваться этим bb-кодом, а создавая тему - нет?

Что вы имеете в виду? Нет кнопочки, или не обрабатывается сам код?
Если второе, попробуйте изменить вот эту цифру в скрипте:
Quote (Code)
for(k=15;k<e.length;k++){
...

На 14 например.

Или использовать первый код:
Code
<script type="text/javascript">
$('td.posttdMessage').each(function(){var s=this.innerHTML;
if(s.indexOf('[/info]')!=-1){
   $(this).html(s.split('[info]').join('<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>').split('[/info]').join('</fieldset>'));
};
});
</script>

...

0  
22  Shaman [Материал]  [16.06.2012]

Возможно ли реализовать события бб-кодов, через ссылки?
То есть не через расписанные "input" и "img", а через "a href"?
Говоря на простом языке, мне необходимо както вставить действие "onclick" в обычную ссылку.
Если это возможно, прошу показать пример кода. спасибо

0  
20  Юлия [Материал]  [08.05.2012]

С помощью какого ВВ кода можно сделать на форуме неактивной ссылку на сайт?

0  
21  likbezz [Материал]  [10.05.2012]

Quote (Юлия)
С помощью какого ВВ кода можно сделать на форуме неактивной ссылку на сайт?

Что вы имеете в виду под «неактивной»?
По любому, все BB-коды реализуются скриптом, то есть, результат работы скрипта не учитывается поисковиками, если вы об этом.
...

0  
19  Marqes [Материал]  [04.05.2012]

Спасибо за статью,
все расписано по полочкам, прикрутил на форум вв коды для картинок float:left/right
и все отлично работает кроме первого поста в теме, в нем картинка отображается текстом

[img_L]http://#####.jpg[/img_L]

0  
17  prizrak95r [Материал]  [15.04.2012]

всем привет блин я не понял ничего ))))
помогите сделать кнопку принажатия которой будет ставлятся текст " P.S.: Копирование не желательно, но если все же будете копировать данный материал, ссылка на активную ссылку этого материала ОБЯЗАТЕЛЬНА" очень буду благодарен
!!!!!!!

0  
18  likbezz [Материал]  [16.04.2012]

Как сделать свои операторы, теги? (реализация при помощи JavaScript replace)
Примеры присутствуют.
... Практически то (с минимальными изменениями), о чем вы спрашиваете ...

0  
16  AndrossIIG [Материал]  [26.03.2012]

Ваш сайт - likbezz.ru показался мне очень привлекательным и перспективным.
Хочу приобрести рекламное место для баннера в шапке Вашего сайта.
Какова будет стоимость данной услуги?
Оплачивать буду через WebMoney, 50% сразу, а 50% через 2 недели.

И еще, адрес моего сайта http://megasto.com.ua/ - он не будет противоречть тематике Вашего сайта?

Напишите о Вашем решении мне на почту megasto.com.ua@gmail.com
Заранее благодарен за оперативный ответ.

0  
14  Елена [Материал]  [18.03.2012]

Сделал как всё сказано но почему-то ББ- коды не работаю, кнопка в редакторе (инфо)появилась код в обрабочка вставил не работает что сним что без него. При выделении текста и нажатии кнопки (инфо) появляется в начале[info] мой текст[/info]
При просмотре предварительном так слово с этими тегами и остаётся. почему-то не работает???

0  
15  likbezz [Материал]  [18.03.2012]

Quote (Елена)
При просмотре предварительном так слово с этими тегами и остаётся. почему-то не работает???

При предварительном просмотре и не должно работать, это же не системный код... обработчик этого BB-кода должен стоят в шаблоне Общий вид форума, после оператора $body$.
По прочим «не работает» прошу писать на форум, с указанием адреса страницы где не работает.

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