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

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

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

[b]Полужирное начертание[/b] выводит Полужирное начертание
[u]Подчёркнутый текст[/u] выводит Подчёркнутый текст
[i]Текст курсивом[/i] выводит Текст курсивом

И целый ряд других, кодов позволяющих форматировать текст сообщения любым образом. Но, что делать если требуется добавить собственный 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) и вывести туда кнопку нашего нового кода.

Category PHP     Tags

Оставить комментарий

Автор блога
Чернышов Роман
Роман Чернышов
Веб-разработчик, Full Stack
Senior, Architector
PHP, JavaScript, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка