Скрипт предпросмотра комментария с помощью jQuery: вариант 1
Сегодня рассмотрим первый вариант скрипта предпросмотра комментария, работающего на jQuery. Чтобы не повторяться здесь, предлагаю вам прочитать характерные особенности этого скрипта, описанные в одном из моих предыдущих постов.
В исходном коде специально созданного примера вы найдете скрипт, который реализует предпросмотр.
Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, необходимы знания технологий CSS и HTML.
По сути данный скрипт можно прицепить к любому сайту на любом движке. Для этого необходимо выполнить несколько несложных действий:
- Подключить к сайту фреймворк jQuery (если он не был подключен ранее), например следующим образом:
в тег <head></head> добавить пару следующих строчек:
1
2<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script> - Подключить сам скрипт либо аналогично моему примеру, либо поместить его в отдельный js-файл и подключить по аналогии с первым пунктом (не забыв указать полный путь до скрипта):
1<script type="text/javascript" src="jquery-comment-preview.js"></script>
- В скрипте найти блок настроек и указать нужные параметры (мой пример сделан на основе формы комментирования WordPress):
1
2
3
4
5
6
7/* === настройки === */
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-код блока предпросмотра, то он представлен в скрипте следующей строкой:
1$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> пишет:</div><div id="ctext"></div></div></div>');
Однако имейте при этом в виду, что работа скрипта завязана на идентификаторах, которые используются в данном коде (за исключением id=”comment-preview-block” и id=”comment-preview”), поэтому при их изменении вам придется заменять их во всем скрипте.
В ближайшее время выложу второй вариант скрипта предпросмотра комментария, работающего также на jQuery.
* * *
ЦОП E-Customer приглашает партнеров принять участие в новогоднем розыгрыше! Фотоаппарат, мобильные телефоны и швейцарские часы уже ждут своих хозяев. 20 декабря он-лайн трансляция события с объявлением победителей. Правила участия и все детали на форуме.
Ура! Спасибо!
Ушел пробовать :)
Мм.. Слил скрипт, запихал в отдельный файлик, открыл редактором, но.. Моего интеллекта решительно не хватает для понимания места, где в этом скрипте расположен блог настроек..
Можно поподробнее, так сказать, для дятлов? :)
Я же написал, как выглядят настройки, вот этот код там и ищите =) Начинаются со строчки:
/* === настройки === */
Всё понял. Дырявая моя голова при прочтении поста пропустила:
И жестоко пыталась в коде скрипта гугла вышеупомянутые настройки.
Брр. Я совсем докатился.
PS: И вообще - Дим, так нечестно :) Раскрыв один секретик ты породил новый: http://clip2net.com/clip/m10803/1229530264-clip-22kb.jpg. Я теперь хочу теперь еще и такую плюшку :)
Рад, что разобрался.
Эта плюшка состряпана в плагине для WordPress в виде 2-го варианта скрипта предпросмотра. В ближайшем посте будет =) Только в таком случае тебе нет резона разбираться в скрипте из данного поста.
Мне бы хоть в этом пока разобраться.. Ибо выводиться он пока отказывается..
Тебе принципиально нужен этот вариант предпросмотра?
Dimox, как объяснить.. На блоге я буду использовать другой вариант, т.е. тот, что сейчас установлен у тебя.. Но я люблю покопаться в коде и доводить начатое до конца, а посему сижу и мучаюсь, как дурак, в попытке поставить заставить работать эту версию :) Чистая упрямость и вредность - ничего больше..
Тогда пробуй сначала сделать по аналогии с исходным кодом примера.
Спасибо тебе огроменное. Я сегодня полдня и пол инета перерыл в поисках учебников, в которых бы рассказывалось как сделать превью для любой textarea и вот уже сам начал шкрябать и решил отвлечься и почитать гугльридер. И что я вижу — твой скрипт делает именно то что мне надо! Я очень тебе благодарен.
lilumi, на здоровье. Я рад, что пригодилось ;)
У этого скрипта есть недочет. Если удалять содержимое из textarea и при этом уменьшается кол-во строк, то высота textarea остается прежней. Хотя, это скорее не недочет скрипта предпросмотра, а того, который ответственен за изменение размера этой самой textarea.
Николай В., если вы про textarea, который ниже коментариев, то к скрипту предпросмотра это отношения не имеет. Растяжка textarea - это другой скрипт.
Ну да, я и написал об этом в своем комментарии :). Просто, все делалось в комплексе: предпросмотр и проверка растяжки textarea.
Проблемма в следующем:
набираем к примеру 3 строки текста или более, после нажимаем 2 раза Enter, чтобы отступить от этих строк и пишем ещё одну строку текста.
После второго нажатия на Enter разрыв получается не только между последней строкой и всеми остальными, но и между предпоследней строкой и верхними строчками
К сожалению, ничего поделать не могу. Я использовал готовое решение, которое форматирует текст в предпросмотре, т.к. сам в этом не силен.
Имеется ввиду, что
нужно вставить в исходный код в том месте, где должен находиться скрипт на сайте? Простите я чайник.
Как и обещал смог прикрутить Ваш скрипт к DataLife Engine, одновременно упростив его, т.к. поля автор, e-mail, и сайт впринципе не нужны.
В итоге имеем вот такой код:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$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);
});
})
Пришлось только переписать обработку тегов, используемых при написании комментария. и осталась незакрытая проблема отображения в окошке предпросмотра исходного кода, он обрабатывается браузером как элемент страницы, а не как текст.
Было бы неплохо сразу к объяснялке приделать эту функцию для просмотра