Идея: sas9568635
Просмотр сообщений оффлайн
Обсуждение
Демонстрация (Проблема с кодировкой связана с хостингом, на mybb всё будет пучком.)
Маленькая, но полезная примочка, позволяющая смотреть, как будет выглядеть ваше сообщение без перехода на страницу вида http://адрес.сайта/edit.php?..., даже без подключения к интернету.
Вот сам устанавливаемый код:
<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 ставится для таких тегов, как [you] и [hr], для всех остальных - true.
Зелёный - паттерн замены - регулярное выражение, которое приведёт к созданию html-кода. При определении параметра variants как true, вместо этого параметра ставятся result1 и result2 (При наличии и при отсутствии параметра соответственно).
Минигайд по созданию паттернов
Паттерн для тегов без параметра (на примере тег [b]).
Все теги без параметров имеют вид [tag] . . . [/tag]. Для таких тегов паттерны однотипны и просты:
Красный - тег(и), предшествующие тексту, заключённому тексту
Синий - выделяемый текст
Зелёный - тег(и), предшествующие тексту, заключённому тексту
Паттерн для тегов с параметром (на примере тег [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>' });
Тогда текст будет выделяться рамкой, цвет которой задаётся в параметре.
Если же у вашего тега более сложная обработка, то сделайте для пред.просмотра окно (см. выше)
Если будет востребовано, сделаю возможность заменить стандартную кнопку, хотя можно просто сделать ту кнопку невидимой.
По всем вопросом пишите в тему, которую я указал в начале сообщения. Желаю услышать любую критику и предложения.
Объясняю, как всегда, криво
Отредактировано kozhilya (Сб, 28 Апр 2012 17:49:00)