Name: Как сделать свои BB-коды для сайта / форума
Item: Как сделать свои BB-коды для сайта / форума
Author: foksin

Главная » Статьи » 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

Всего комментариев: 29

1 2 »

Порядок вывода комментариев:

28 foksin (08.07.2015 15:21)

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

29 likbezz (12.07.2015 10:35)

Цитата foksin

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

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

27 XCanG (27.10.2013 14:20)

Хмм, многие люди уже знают именно такой вариант статьи. Но вот вопрос заключается в более сложном бб-коде, где, например нужно использовать 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...

25 Давид (12.09.2012 02:47)

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

26 Mr_Smith (12.09.2012 18:51)

Quote (Давид)

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

Очень жаль.

Quote (Давид)

Вообщем мне нужна кнопка в каталог файлов ...

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

23 ♪НеЗнакомкА♫ (26.07.2012 18:02)

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

24 likbezz (26.07.2012 22:58)

Quote (♪НеЗнакомкА♫)

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

Что вы имеете в виду? Нет кнопочки, или не обрабатывается сам код?
Если второе, попробуйте изменить вот эту цифру в скрипте:

Quote (Code)

for(k=15;k<e.length;k++){
...

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

Или использовать первый код:

Code

...

22 Shaman (16.06.2012 12:35)

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

20 Юлия (08.05.2012 14:57)

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

21 likbezz (10.05.2012 20:25)

Quote (Юлия)

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

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

19 Marqes (04.05.2012 16:47)

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

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

17 prizrak95r (15.04.2012 21:31)

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

18 likbezz (16.04.2012 16:43)

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

16 AndrossIIG (26.03.2012 19:38)

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

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

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

14 Елена (18.03.2012 13:13)

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

15 likbezz (18.03.2012 18:50)

Quote (Елена)

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

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

1-10 11-17

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