PunBB: Добавление нового BB кода

Автор: Роман Чернышов    Опубликовано: 18 мая 2013

В замечательном форумном движке PunBB предусмотрены следующие BB-коды(BBCode):

И целый ряд других, кодов позволяющих форматировать текст сообщения любым образом. Но, что делать если требуется добавить собственный BB-код, например спойлер(который не предусмотрен движком)?

далее я опишу процесс добавления собственного BB-кода «Спойлера» (скрытый текст под ссыкой), при клике на ссылку блок скрывающий текст разворачивается и текст становится доступен для прочтения пользователями. Удобная функция для публикации контента второстепенной степени значимости или скрытого контента от не зарегистрированных пользователей.

Работать будем с движком форума версии 1.4 (но не думаю, что прием в других версиях будет сильно отличаться). И так поехали:

Идем в файл /include/parser.php, ищем функцию function preparse_tags и в строке 120, добавляем в массив $tags новое значение: spoiler.

Получим вот такой код:

$tags = array('quote', 'code', 'b', 'i', 'u', 'color', 'colour', 'url', 'email', 'img', 'list', '*', 'h','spoiler');

Далее ищем функцию, function do_bbcode, и встроке 753 добавляем:

	$pattern[] = '#\[spoiler\](.*?)\[/spoiler\]#ms';

а в строке 760

	$replace[] = '<a href="javascript://" class="openspoiler">Скрытый текст</a><div class="spoiler">$1</div>';

Получим вот такой код:

	$pattern[] = '#\[b\](.*?)\[/b\]#ms';
	$pattern[] = '#\[i\](.*?)\[/i\]#ms';
	$pattern[] = '#\[u\](.*?)\[/u\]#ms';
	$pattern[] = '#\[colou?r=([a-zA-Z]{3,20}|\#[0-9a-fA-F]{6}|\#[0-9a-fA-F]{3})](.*?)\[/colou?r\]#ms';
	$pattern[] = '#\[h\](.*?)\[/h\]#ms';
	$pattern[] = '#\[spoiler\](.*?)\[/spoiler\]#ms';
 
	$replace[] = '<strong>$1</strong>';
	$replace[] = '<em>$1</em>';
	$replace[] = '<span class="bbu">$1</span>';
	$replace[] = '<span style="color: $1">$2</span>';
	$replace[] = '</p><h5>$1</h5><p>';
	$replace[] = '<a href="javascript://" class="openspoiler">Скрытый текст</a><div class="spoiler">$1</div><p>';

На этом этапе добавление нового BBCode закончено, в том числе его обработка парсером форума. Теперь весь текст заключенный в BB-код [spoiler]пример текста[/spoiler] будем помещаться в блок дальше

<div class="spoiler">$1</div>

, а он в свою очередь будет свернут.

Сворачивание блока по умолчанию, мы пропишем в свойствах CSS, в вашем шаблоне, пример /style/Oxygen/Oxygen.css в самый конец файла добавляем

div.spoiler {display:none;border:1px dotted #333;padding:10px;}
.openspoiler {display:block;border:1px dotted #333;padding:10px;background:#fef0ea}

Следующий шаг, добавляем JS скрипт, обработчик клика на ссылку «Скрытый текст», чтобы скрытый блок развернулся и мы увидели скрытый текст.
Для этого в тело шаблона добавляем следующий javaScript код

$(document).ready(function(){
	$('.openspoiler').click(function(){
		$(this).parent().next('.spoiler').toggle();
		$(this).hide();
	});
});

не забываем также подключить библиотеку jQuery, или установить плагин, который так и называется jQuery Plugin. (Для работы нашего JS кода)

После чего форум станет поддерживать новый BB код — Спойлер, при желании можно установить плагин\расширение — панельку BB-кодов(BBCode buttons 1.4.18) и вывести туда кнопку нашего нового кода.

PHP     punbb