loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

СоветыПредпросмотр комментария к новости в реальном времени с помощью jQuery

Написал ПафНутиЙ, 2 июля 2010 | 22 комментария | рейтинг новости не нравится   +1   нравится Версия для печати
Предпросмотр комментария к новости в реальном времени с помощью jQuery


Недавно мне попался на глаза интересный jQuery скрипт для предпросмотра комментария так сказать в реальном времени. И вот мне очень захотелось прикрутить этот скрипт к DLE, как оказалось впоследствии, дело не столь сложное.

Плюсы данного скрипта:
1. Предпросмотр комментария происходит, без перезагрузки страницы, т.е. в реальном времени.
2. При отключенных javascript`ах в браузере предпросмотр просто не будет показываться, т.е. ничего не расползётся и т.д.

Демонстрацию данного скрипта вы можете увидеть прямо в форме добавления комментария на сайте _pafnuty.name, если начнёте набирать текст.


А теперь обо всём по порядку.

Предупреждаю сразу, скрипт нужно подгонять под каждый конкретный сайт, для корректного отображения предпросмотра.

Скрипт можно разделить на две составляющие.

1. На первой части остановимся чуть позже, а вот вторая часть это несложный обработчик bb-кодов:
var comment = '';
    $j('#comments').keyup(function() {
        comment = $j(this).val();
        comment = comment.replace(/(<\/?)script/g,'$1noscript')
        .replace(/\r\n/g, '\n')
        .replace(/\r/g, '\n')
        .replace(/\n\n+/g, '\n\n')
        .replace(/\[b\](.+?)\[\/b\]/g, '<strong>$1</strong>')
        .replace(/\[i\](.+?)\[\/i\]/g, '<i>$1</i>')
        .replace(/\[s\](.+?)\[\/s\]/g, '<s>$1</s>')
        .replace(/\[u\](.+?)\[\/u\]/g, '<u>$1</u>')
        .replace(/\[left\](.+?)\[\/left\]/g, '<div align="left">$1</div>')
        .replace(/\[right\](.+?)\[\/right\]/g, '<div align="right">$1</div>')
        .replace(/\[center\](.+?)\[\/center\]/g, '<div align="center">$1</div>')
        .replace(/\[hide\](.+?)\[\/hide\]/g, '<div class="quote">Это скрытый текст</div>')
        .replace(/\[url=(.+?)\]/g, '<a href="$1" target="_blank">')
        .replace(/\[\/url\]/g, '</a>')
        .replace(/\[leech=(.+?)\]/g, '<a href="$1" target="_blank">')
        .replace(/\[\/leech\]/g, '</a>')
        .replace(/\[img\](.+?)\[\/img\]/g, '<img src="$1" alt="" title=""  />')
        .replace(/\[email=(.+?)\]/g, '<a href="mailto:$1">')
        .replace(/\[\/email\]/g, '</a>')
        .replace(/\[color=(.+?)\]/g, '<span style="color:$1">')
        .replace(/\[\/color\]/g, '</span>')
        .replace(/\[quote=(.+?)\]/g, '<div class="title_quote">Цитата: $1</div><div class="quote">')
        .replace(/\[quote\](.+?)/g, '</div><div class="quote">$1')
        .replace(/\[\/quote\]/g, '</div>')
        .replace(/\[spoiler=(.+?)\]/g, '<div class="title_spoiler"><a href="\#">$1</a></div><div class="text_spoiler">')
        .replace(/\[spoiler\](.+?)/g, '<div class="title_spoiler"><a href="\#">Спойлер</a></div><div class="text_spoiler">$1')
        .replace(/\[\/spoiler\]/g, '</div>')
        .replace(/\[code\](.+?)\[\/code\]/g, 'предпросмотр исходного кода пока недоступен')
        .replace(/\:(.+?)\:/g, '<img style="vertical-align: middle;border: none;" alt="" src="/engine/data/emoticons/$1.gif" />')
        .replace(/\s*\n\s*/g, '<br />');
        $j('#ctext').html(comment);
    });


Обратите внимание на предпоследнюю строку, идентификатор #ctext, указанный в этой строке - это идентификатор блока с текстом комментария в предпросмотре.


2. А теперь самое сложное - первая часть скрипта.

Основной код - это обычный html-код
<div class="comments"><h2>Предпросмотр комментария</h2><div class="comm-foto"><img src="http://yoursite.ru/theme/yourtheme/images/noavatar.png" border="0" alt="" width="80" /></div><div id="ctext" class="comment"></div><div class="clr"></div></div>

взятый из шаблона comments.tpl и немного поправленный.
- Нужно убрать из шаблона весь "мусор" - это все dle-теги.
- Вместо тега {phоto} нужно поставить ссылку на изображение аватарки.
- Вместо тега {commеnt} вставить блок с идентификатором комментария, о котором я говорил выше, т.е. вот такой вот код:
<div id="ctext"></div>


Вот собственно и всё, что требуется для красивого предпросмотра комментария в процессе набора.

С теорией разобрались, теперь установка:

1. Подключаем, если ещё не подключена, библиотеку jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


2. Подключаем, заранее поправленный под свой сайт, скрипт предпросмотра комментария (качаем его чуть ниже).

<script src="/templates/Simple/js/tooltip.js" type="text/javascript"></script>

Замечу, что папка со скриптом на вашем сайте может отличаться от указанной в коде.

ВСЁ! Наслаждаемся.

Ссылка для скачивания: _http://slil.ru/29423210


Отблагодарили: roller, Fozzy747, pavel31, OrkZ, DVMade

Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Комментарий был скрыт за отрицательный рейтинг (-6) и по мнению остальных пользователей не несёт смысловой нагрузки!
показать комментарий
Написал mars, 2 июля 2010 в 20:13 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 404, Модератор
Карма:
смысл в реализации) используя этот метод вы можете сделать предпросмотр новостей к примеру или ещё чего то... Да и выглядит это не обычно... И даже в тех же комментариях приятно видеть что пишешь :)

Написал ПафНутиЙ, 2 июля 2010 в 21:00 плохой комментарий   +4   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Цитата: VisitorS
Интересно, только какой смысл с предпросмотра комментраия?

А какой смысл убирать кровать с утра, если вечером ложиться спать?
Какой смысл рождаться, если примерно через 67 лет (статистика по России) умирать?

Чтобы было на что посмотреть, глазу приятно чтобы было.

Написал VisitorS, 3 июля 2010 в 09:53 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 100, Пользователи
Карма:
Я кровать не убираю, так что смысла никакого... За модуль конечно спасибо :)

Согласен с ПафНутиЕм ИМХО как ни как, но в первое время будет удивлять пользователей - а это выше % возращяемости пользователей.

Да вотето пользователи будут возвращаться чтоб нажать пред просмотр своего коммента bu

Написал roller, 2 июля 2010 в 23:03 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 286, Пользователи
Карма:
Согласен с ПафНутиЕм ИМХО как ни как, но в первое время будет удивлять пользователей - а это выше % возращяемости пользователей. Да и если так подумать, в 9.0 версии dle jQuery уже встроенный будет - тогда и этот хак только в + будет работать.

Написал master13, 3 июля 2010 в 09:21 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 15, Пользователи
Карма:
лучше предпросмотр новости сделать, если на то дело пошло. :)

Написал mars, 3 июля 2010 в 10:34 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 404, Модератор
Карма:
лучше предпросмотр новости сделать, если на то дело пошло. :)

А что мешает? или все привыкли что всё разжуют и в ротик положат?)

Написал ПафНутиЙ, 3 июля 2010 в 10:42 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Цитата: master13
лучше предпросмотр новости сделать, если на то дело пошло. :)

Делайте, ничего сложного, главное обработчик правильно написать :)

Написал sadead, 3 июля 2010 в 14:25 плохой комментарий   0   хороший комментарий
Новостей: 13, комментариев: 184, Пользователи
Карма:
Мало кто из пользователей использует BBcodes. Преимущественно печатают обычным текстом. Да и потом эта форма стягивает на себя внимание, посторонним шевелением. Так что юзабилити в комментариях это не добавляет, а убавляет.

В комментариях - лишнее, в добавлении новости - необходимо.

Спасибо за интересный скрипт smile

Написал ПафНутиЙ, 3 июля 2010 в 21:21 плохой комментарий   +2   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Цитата: sadead
Мало кто из пользователей использует BBcodes

Но всё же, тем кто использует bb-codes будет приятнее смотреть на результат действия бб-кода, чем на его тег.
Цитата: sadead
Да и потом эта форма стягивает на себя внимание, посторонним шевелением.

Я даже не настаиваю на установке этого скрипта на сайт ap, кому понравилось - установит, кто захочет - модифицирует и сделает предпросмотр новости на основе этого скрипта.

P.S.
А вообще я очень сильно непонимаю "политику" юзеров 4dle!
Что за комментарии?
делайте конструктивные замечания, любой здравомыслящий разработчик примет их к сведению и постарается исправить косяки. А тупое набивание количества комментариев, фразы типа "я мог и лучше сделать", "это уже гдето было", это не ново, я знал это" - глупо. Если вы настолько "умны", почему до сих пор держите свой язык не понятно в каком месте и не делитесь с народом своими наработками? Или зажали, а может просто это, как говорится, дешёвые понты?
И это относится не только к данному посту, а вообще в целом!

Написал Emperio, 4 июля 2010 в 12:49 плохой комментарий   0   хороший комментарий
Новостей: 13, комментариев: 179, Пользователи
Карма: 10±
Но всё же, тем кто использует bb-codes будет приятнее смотреть на результат действия бб-кода, чем на его тег.

Если уж и хочется смотреть результат действия какого либо тега, то уж лучше использовать wysiwyg редактор.
Но тем не менее ваша публикация очень полезна, спасибо вам.

Написал pavel31, 4 июля 2010 в 00:47 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 26, Пользователи
Карма:
Не работает!! crying

Написал ПафНутиЙ, 4 июля 2010 в 09:18 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Значит вы что-то сделали неправильно.

Написал kavadims, 4 июля 2010 в 12:18 плохой комментарий   +1   хороший комментарий
Новостей: 9, комментариев: 122, Пользователи
Карма:
Смысл ставить модуль есть только тем - у кого отключена возможность редактирования комментария и удаления.
Тогда пользователь для того, чтобы убедится что все будет ка кнужно выглядеть - "Предпросмотр комментария"

Так работает Хабр..ну и движок LiveStreet

Написал pavel31, 4 июля 2010 в 21:43 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 26, Пользователи
Карма:
ПафНутиЙ,
У меня нет файла tooltip.js и соответственно как я могу его загрузить и где мне его взять??

Написал ПафНутиЙ, 5 июля 2010 в 01:09 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
<script src="/templates/Simple/js/comment-preview.js" type="text/javascript"></script>

немного неправильно написал, когда публиковал новость, но впринципе по смыслу можно догадаться, что нужно подключить скачанный файл.
Ссылка для скачивания есть в новости, либо можно скачать с _http://pafnuty.name/statyi/76-predprosmotr-kommentariya-jquery-edition.html

Написал DVMade, 9 июля 2010 в 11:29 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 2, Пользователи
Карма:
Не получается установить никак, вро де бы все правильно написал, проверил раз 10, вот сайт dvmade.ru прошу помощи, чт оя не так сделал, просто не отображаетс я предпросмотр и все!

Написал ПафНутиЙ, 9 июля 2010 в 15:22 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Я так понял проблема уже решена?

Написал nikolas22, 11 июля 2010 в 10:57 плохой комментарий   0   хороший комментарий
Новостей: 13, комментариев: 79, Пользователи
Карма: -1±
У меня также не заработало почему то
в рффіюььхэђё.ђяы в самое окончание добавил

Предпросмотр комментария

Ну и соответственно в папку js скопировал подправленный файл comment-preview.js
вот сайт


У меня также не заработало почему то
в
addcomments.tpl
в самое окончание добавил


Предпросмотр комментария


Ну и соответственно в папку js скопировал подправленный файл comment-preview.js
вот сайт

У меня также не заработало почему то
в
addcomments.tpl
в самое окончание добавил


Предпросмотр комментария


вот сайт

Написал ПафНутиЙ, 11 июля 2010 в 23:23 плохой комментарий   +1   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
А зачем 3 раза повторять?
Ну для начала хотелось бы отметить:
<meta name="generator" content="DataLife Engine Nulled by M.I.D-Team (http://www.mid-team.ws)" />

Это не хорошо, совсем не хорошо.
Ну а во вторых - скрипт то и не подключен.

Написал nikolas22, 12 июля 2010 в 10:14 плохой комментарий   0   хороший комментарий
Новостей: 13, комментариев: 79, Пользователи
Карма: -1±
ПафНутиЙ,
подключил как все выше написано, но почемуто не хочет отображать набираемый текст. Возможно проблема в библиотеке jquery?

Написал nikolas22, 26 июля 2010 в 20:43 плохой комментарий   0   хороший комментарий
Новостей: 13, комментариев: 79, Пользователи
Карма: -1±
Разобрался уже как то сам, библиотеку jquery подключил и все норм. автору СПС +1

Информация



Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Анализ Тиц и PR сайта

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]