Главная JavaScript

Скрипт предпросмотра комментария с помощью 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. Ура! Спасибо!
    Ушел пробовать :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  17. Как и обещал смог прикрутить Ваш скрипт к 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(/rn/g, 'n')
    		.replace(/r/g, 'n')
    		.replace(/nn+/g, 'nn')
    		.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*ns*/g, '<br />');
    		$j('#ctext').html(comment);
    	});
    
    })

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

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