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

19 комментариев

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

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

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

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

Подключить к сайту фреймворк 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>
```
Подключить сам скрипт либо аналогично моему примеру, либо поместить его в отдельный js-файл и подключить по аналогии с первым пунктом (не забыв указать полный путь до скрипта):
```
<script type="text/javascript" src="jquery-comment-preview.js"></script>
```

В скрипте найти блок настроек и указать нужные параметры (мой пример сделан на основе формы комментирования 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 - не показывать
	/* === конец настроек  === */

Написать CSS-код для блока предпросмотра под свой сайт.
Если вам очень захочется поменять 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 декабря он-лайн трансляция события с объявлением победителей. Правила участия и все детали на форуме.

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

22 комментария

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

jQuery-cкрипт "Добавить в закладки"

135 комментариев

Данный скрипт – это усовершенствованная версия JS-скрипта “Добавить в закладки”, который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его “добить”. ...

Предпросмотр комментария вживую с помощью jQuery: теория

12 комментариев

Уважаю такие движки (будь то форум, блог, или же какая-нибудь система управления сайтом), в которых предусмотрен предпросмотр набираемого сообщения/комментария. Он может быть полезен, к примеру, в случае, когда нужно изобразить ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...

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

Sonikelf
16 декабря 2008 г. в 18:36
Ура! Спасибо!
Ушел пробовать :)
Sonikelf
17 декабря 2008 г. в 18:18
3. В скрипте найти блок настроек и указать нужные параметры (мой пример сделан на основе формы комментирования WordPress

Мм.. Слил скрипт, запихал в отдельный файлик, открыл редактором, но.. Моего интеллекта решительно не хватает для понимания места, где в этом скрипте расположен блог настроек..
Можно поподробнее, так сказать, для дятлов? :)
Dimox
17 декабря 2008 г. в 18:31
Я же написал, как выглядят настройки, вот этот код там и ищите =) Начинаются со строчки:

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

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

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

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

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

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

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

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

Мне бы хоть в этом пока разобраться.. Ибо выводиться он пока отказывается..
Dimox
17 декабря 2008 г. в 20:11
Тебе принципиально нужен этот вариант предпросмотра?
Sonikelf
17 декабря 2008 г. в 20:41
Dimox, как объяснить.. На блоге я буду использовать другой вариант, т.е. тот, что сейчас установлен у тебя.. Но я люблю покопаться в коде и доводить начатое до конца, а посему сижу и мучаюсь, как дурак, в попытке поставить заставить работать эту версию :) Чистая упрямость и вредность – ничего больше..
Dimox
18 декабря 2008 г. в 13:18
Тогда пробуй сначала сделать по аналогии с исходным кодом примера.
lilumi
25 декабря 2008 г. в 01:12
Спасибо тебе огроменное. Я сегодня полдня и пол инета перерыл в поисках учебников, в которых бы рассказывалось как сделать превью для любой textarea и вот уже сам начал шкрябать и решил отвлечься и почитать гугльридер. И что я вижу — твой скрипт делает именно то что мне надо! Я очень тебе благодарен.
Dimox
25 декабря 2008 г. в 12:58
lilumi, на здоровье. Я рад, что пригодилось ;)
Николай В.
16 января 2009 г. в 10:57
У этого скрипта есть недочет. Если удалять содержимое из textarea и при этом уменьшается кол-во строк, то высота textarea остается прежней. Хотя, это скорее не недочет скрипта предпросмотра, а того, который ответственен за изменение размера этой самой textarea.
Dimox
16 января 2009 г. в 12:34
Николай В., если вы про textarea, который ниже коментариев, то к скрипту предпросмотра это отношения не имеет. Растяжка textarea – это другой скрипт.
Николай В.
16 января 2009 г. в 12:35
Ну да, я и написал об этом в своем комментарии :). Просто, все делалось в комплексе: предпросмотр и проверка растяжки textarea.
Макс
26 июня 2009 г. в 13:43
Проблемма в следующем:
набираем к примеру 3 строки текста или более, после нажимаем 2 раза Enter, чтобы отступить от этих строк и пишем ещё одну строку текста.
После второго нажатия на Enter разрыв получается не только между последней строкой и всеми остальными, но и между предпоследней строкой и верхними строчками
1. Dimox
  26 июня 2009 г. в 18:46 / ответ на коммент Макс
  К сожалению, ничего поделать не могу. Я использовал готовое решение, которое форматирует текст в предпросмотре, т.к. сам в этом не силен.
Gomer
26 ноября 2009 г. в 21:50
2.Подключить сам скрипт либо аналогично моему примеру, либо поместить его в отдельный js-файл и подключить по аналогии с первым пунктом (не забыв указать полный путь до скрипта):

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

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

ПафНутиЙ

30 июня 2010 г. в 21:21

Как и обещал смог прикрутить Ваш скрипт к 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);
	});

})

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

One source
26 сентября 2010 г. в 16:42
Было бы неплохо сразу к объяснялке приделать эту функцию для просмотра