Просмотр сообщений оффлайн
Маленькая примочка позволяющая смотреть, как будет выглядеть ваше сообщение без перехода на страницу вида -- даже без подключения к интернету.
Автор: kozhilya
Платформа: MyBB
Аналоги: Мгновенный предпросмотр сообщений (MyBB) [Alex_63]
Вот сам устанавливаемый код:
<script src="http://forumstatic.ru/files/0010/74/32/62633.js"></script>
<script>
$('.formsubmit').append(' <input type="submit" class="button" name="offlinePrev" value="Просмотр в оффлайне" onclick="return false;" />'); $('#post-form fieldset').before('<fieldset id="post-preview" style="display: none"><legend><span>Предварительный просмотр сообщения</span></legend><div class="fs-box"><div class="post-box"><div class="post-content"></div></div></div></fieldset>'); $('.formsubmit input[name="offlinePrev"]').click(function() { if ($('#post-preview .post-content')) GetBBCodeOffline($('#post-preview .post-content')[0], $('textarea#main-reply').val()); $('#post-preview').css({'display': 'block'}); });</script>
Скрипт создаёт над формой ответа панель предварительного просмотра с отпарсенным кодом.
Зелёный текст - надпись на кнопке.
Если вас не устраивает панель просмотра над полем ввода, замените красное слово на after.
А если вас в принципе не устраивает панель, но зато устроит отдельное окно, то синий текст можете заменить на следующий:
bbPreview = window.open("", "", "height=450, width=900, top=50, left=50, scrollbars=1"); bbPreview.document.write(GetBBPreviewCode($('#post-preview')[0])); bbPreview.document.close();
Тогда при нажатии на кнопку появится отдельное окно, в котором будет отображаться содержимое. Однако, в силу особенностей работы браузеров, окно может некорректно отображать фон окна предварительного просмотра при отсутствии подключения к интернету (точнее, фона может не быть вообще, а шрифт будет стандартный, Times New Roman). Однако при использовании этого окна шанс получить более точное отображение сообщения повысится за счёт перезапуска скриптов, стоящих html-верху и низу. В общем, решать вам: точность отображения или способность корректно работать при отсутствии подключения к интернету.
Также полезная примочка для тех, у кого много своих bb-кодов: возможность добавлять свои теги в стандартный список, сделанный мной. Делается это таким кодом (ставить надо сразу после <script>!!!):
bbtags.set('Название тега', { params: false, variants: false, double: true, result: '<span style="border: 1px solid blue">$1</span>' });
Параметры:
Красное - название тега. Но ставить надо не текст с кнопки, а сам тег без квадратных скобок. То есть для тега [b] названием является 'b', для [quote] - 'quote' и т.д.
Синее - boolean'овская величина, определяющая наличие параметров в теге. true сответствует наличию параметра (на подобии тегов [font], [align] и проч.); false - отсутствие параметра ([b], [img]).
Жёлтый - вот этот параметр трогать не советую, ставьте false. Значение true ставится для тегов типа [quote] и [hide], то есть у которых нельзя заранее сказать, есть ли параметр или нет. В этом случае params ставится true, а double - true. Кроме того, вместо result надо делать result1 и result2, но об этом позже.
Пурпурный - требуется ли закрывающий тег. false ставится для таких тегов, как Гость и
, для всех остальных - true.
Зелёный - паттерн замены - регулярное выражение, которое приведёт к созданию html-кода. При определении параметра variants как true, вместо этого параметра ставятся result1 и result2 (При наличии и при отсутствии параметра соответственно).
Паттерн для тегов без параметра (на примере тег [b]).
Все теги без параметров имеют вид [tag] . . . [/tag]. Для таких тегов паттерны однотипны и просты:<strong>$1</strong>
Красный - тег(и), предшествующие тексту, заключённому тексту
Синий - выделяемый текст
Зелёный - тег(и), предшествующие тексту, заключённому текстуПаттерн для тегов с параметром (на примере тег [color]).
Все теги без параметров имеют вид [tag=параметр] . . . [/tag]. Для таких тегов паттерны более сложны, и надо знать, куда вставлять параметр:<span style="color: $1">$2</span>
Красный - тег(и), предшествующие тексту, заключённому тексту
Пурпурный - параметр тега
Синий - выделяемый текст
Зелёный - тег(и), предшествующие тексту, заключённому тексту
Вот пример создания тега в предварительный просмотр:
bbtags.set('tag', { params: false, variants: false, double: true, result: '<span style="border: 1px solid blue">$1</span>' });
Такой тег выделяет текст в синюю рамку.
А можно сделать так:
bbtags.set('tag', { params: true, variants: false, double: true, result: '<span style="border: 1px solid $1">$2</span>' });
Тогда текст будет выделяться рамкой, цвет которой задаётся в параметре.
Если же у вашего тега более сложная обработка, то сделайте для пред.просмотра окно (см. выше)
