Скрипт предпросмотра комментария с помощью jQuery: вариант 1

Сегодня рассмотрим первый вариант скрипта предпросмотра комментария, работающего на jQuery. Чтобы не повторяться здесь, предлагаю вам прочитать характерные особенности этого скрипта, описанные в одном из моих предыдущих постов.

В исходном коде специально созданного примера вы найдете скрипт, который реализует предпросмотр.

Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, необходимы знания технологий CSS и HTML.

По сути данный скрипт можно прицепить к любому сайту на любом движке. Для этого необходимо выполнить несколько несложных действий:

  1. Подключить к сайту фреймворк jQuery (если он не был подключен ранее), например следующим образом:

    в тег <head></head> добавить пару следующих строчек:

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.2.6");</script>
    
  2. Подключить сам скрипт либо аналогично моему примеру, либо поместить его в отдельный js-файл и подключить по аналогии с первым пунктом (не забыв указать полный путь до скрипта):
    <script type="text/javascript" src="jquery-comment-preview.js"></script>
    
  3. В скрипте найти блок настроек и указать нужные параметры (мой пример сделан на основе формы комментирования WordPress):
    	/* === настройки === */
    	var author_id = '#author'; // ID поля имени автора, решетка перед ID обязательна
    	var url_id = '#url'; // ID поля ссылки, решетка перед ID обязательна
    	var comment_id = '#comment'; // ID поля комментария, решетка перед ID обязательна
    	var avatar_link = 'http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32'; // ссылка на аватар
    	var show_avatar = 1 // 1 - показывать аватар, 0 - не показывать
    	/* === конец настроек === */
    
  4. Написать CSS-код для блока предпросмотра под свой сайт.
  5. Если вам очень захочется поменять HTML-код блока предпросмотра, то он представлен в скрипте следующей строкой:
    $j(comment_id).parent().after('<div id="comment-preview-block"><h2>Предпросмотр комментария:</h2><div id="comment-preview">'+ avatar +'<div><strong id="preview-author"><a href="'+ url +'">'+ author +'</a></strong>&nbsp;пишет:</div><div id="ctext"></div></div></div>');
    

    Однако имейте при этом в виду, что работа скрипта завязана на идентификаторах, которые используются в данном коде (за исключением id="comment-preview-block" и id="comment-preview"), поэтому при их изменении вам придется заменять их во всем скрипте.

В ближайшее время выложу второй вариант скрипта предпросмотра комментария, работающего также на jQuery.

* * *

ЦОП E-Customer приглашает партнеров принять участие в новогоднем розыгрыше! Фотоаппарат, мобильные телефоны и швейцарские часы уже ждут своих хозяев. 20 декабря он-лайн трансляция события с объявлением победителей. Правила участия и все детали на форуме.

Комментарии (19)
  1. 1

    Ура! Спасибо!
    Ушел пробовать :)

  2. 2

    3. В скрипте найти блок настроек и указать нужные параметры (мой пример сделан на основе формы комментирования WordPress

    Мм.. Слил скрипт, запихал в отдельный файлик, открыл редактором, но.. Моего интеллекта решительно не хватает для понимания места, где в этом скрипте расположен блог настроек..
    Можно поподробнее, так сказать, для дятлов? :)

  3. 3

    Я же написал, как выглядят настройки, вот этот код там и ищите =) Начинаются со строчки:

    /* === настройки === */

  4. 4

    Я же написал, как выглядят настройки, вот этот код там и ищите =) Начинаются со строчки:
    /* === настройки === */

    Всё понял. Дырявая моя голова при прочтении поста пропустила:

    В исходном коде специально созданного примера вы найдете скрипт, который реализует предпросмотр.

    И жестоко пыталась в коде скрипта гугла вышеупомянутые настройки.
    Брр. Я совсем докатился.

    PS: И вообще — Дим, так нечестно :) Раскрыв один секретик ты породил новый: http://clip2net.com/clip/m10803/1229530264-clip-22kb.jpg. Я теперь хочу теперь еще и такую плюшку :)

  5. 5

    Всё понял. Дырявая моя голова при прочтении поста пропустила:

    Рад, что разобрался.

    Я теперь хочу теперь еще и такую плюшку :)

    Эта плюшка состряпана в плагине для WordPress в виде 2-го варианта скрипта предпросмотра. В ближайшем посте будет =) Только в таком случае тебе нет резона разбираться в скрипте из данного поста.

  6. 6

    Эта плюшка состряпана в плагине для WordPress в виде 2-го варианта скрипта предпросмотра. В ближайшем посте будет =) Только в таком случае тебе нет резона разбираться в скрипте из данного поста.

    Мне бы хоть в этом пока разобраться.. Ибо выводиться он пока отказывается..

  7. 7

    Тебе принципиально нужен этот вариант предпросмотра?

  8. 8

    Dimox, как объяснить.. На блоге я буду использовать другой вариант, т.е. тот, что сейчас установлен у тебя.. Но я люблю покопаться в коде и доводить начатое до конца, а посему сижу и мучаюсь, как дурак, в попытке поставить заставить работать эту версию :) Чистая упрямость и вредность — ничего больше..

  9. 9

    Тогда пробуй сначала сделать по аналогии с исходным кодом примера.

  10. 10
    lilumi

    Спасибо тебе огроменное. Я сегодня полдня и пол инета перерыл в поисках учебников, в которых бы рассказывалось как сделать превью для любой textarea и вот уже сам начал шкрябать и решил отвлечься и почитать гугльридер. И что я вижу — твой скрипт делает именно то что мне надо! Я очень тебе благодарен.

  11. 11

    lilumi, на здоровье. Я рад, что пригодилось ;)

  12. 12
    Николай В.

    У этого скрипта есть недочет. Если удалять содержимое из textarea и при этом уменьшается кол-во строк, то высота textarea остается прежней. Хотя, это скорее не недочет скрипта предпросмотра, а того, который ответственен за изменение размера этой самой textarea.

  13. 13

    Николай В., если вы про textarea, который ниже коментариев, то к скрипту предпросмотра это отношения не имеет. Растяжка textarea — это другой скрипт.

  14. 14
    Николай В.

    Ну да, я и написал об этом в своем комментарии :). Просто, все делалось в комплексе: предпросмотр и проверка растяжки textarea.

  15. 15
    Макс

    Проблемма в следующем:
    набираем к примеру 3 строки текста или более, после нажимаем 2 раза Enter, чтобы отступить от этих строк и пишем ещё одну строку текста.
    После второго нажатия на Enter разрыв получается не только между последней строкой и всеми остальными, но и между предпоследней строкой и верхними строчками

  16. 17
    Gomer

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

    Имеется ввиду, что

    нужно вставить в исходный код в том месте, где должен находиться скрипт на сайте? Простите я чайник.

  17. 18

    Как и обещал смог прикрутить Ваш скрипт к DataLife Engine, одновременно упростив его, т.к. поля автор, e-mail, и сайт впринципе не нужны.
    В итоге имеем вот такой код:

    var $j = jQuery.noConflict();
    
    $j(document).ready(function() {
    	$j('#comments').one('focus',function() {
    	//
    	//Код берём из comments.tpl и подгоняем методом научного тыка.
    		$j('#comments').parent().after('<div class="comments"><h2>Предпросмотр комментария</h2><div class="comm-foto"><img src="{THEME}/images/noavatar.png" border="0" alt="" width="80" /></div><div id="ctext" class="comment"></div><div class="clr"></div></div>');
    	});
    	
    	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);
    	});
    
    })

    Пришлось только переписать обработку тегов, используемых при написании комментария. и осталась незакрытая проблема отображения в окошке предпросмотра исходного кода, он обрабатывается браузером как элемент страницы, а не как текст.

  18. 19
    One source

    Было бы неплохо сразу к объяснялке приделать эту функцию для просмотра