[Ликбез]

Форма входа

Меню сайта

Categories
Java Script [5]
JavaScript — объектно-ориентированный скриптовый язык программирования.JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
JQuery [13]
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

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

Всего комментариев: 291 2 »
28 foksin  
Подскажите пожалуйста как реализовать таблицу на форуме, нужен скрипт, не подскажите какой?

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

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

27 XCanG  
Хмм, многие люди уже знают именно такой вариант статьи. Но вот вопрос заключается в более сложном бб-коде, где, например нужно использовать 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 Давид  
Здраствуйте я всё прочитал , но не нашол то что мне нужно!
Вообщем мне нужна кнопка в каталог файлов "при добавление материала" которая при выделение текста будет обводить его кодом <div id="blue">Тут выделенный текст</div>
Заранее спасибо!

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

Очень жаль.

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

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

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

24 likbezz  
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>

...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полная версия сайта