Скрипт предпросмотра комментария с помощью jQuery: вариант 2
17 декабря 2008 г.
Сегодня предлагаю вам второй вариант моего скрипта для предпросмотра комментария.
Смотрим готовый пример. Скрипт находится в исходном коде данного примера.
Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, необходимы знания технологий 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
8
9/* === настройки === */
var show_text = 'Предпросмотр';
var hide_text = 'Скрыть предпросмотр';
var textarea_name = 'comment'; // значение параметра "name" поля textarea, к которому прицепляем скрипт (<textarea name="?????" ...>)
var author_id = 'author'; // значение параметра "id" поля имени автора
var url_id = 'url'; // значение параметра "id" поля ссылки
var avatar_link = 'http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32'; // ссылка на аватар
var show_avatar = 1 // 1 - показывать аватар, 0 - не показывать
/* === конец настроек === */ - Написать CSS-код для блока предпросмотра под свой сайт, либо воспользоваться готовыми стилями из моего примера.
- Если вам очень захочется поменять HTML-код блока предпросмотра, то он представлен в скрипте следующей строкой:
1var preview_html = '<ol id="comment-preview"><li>'+ avatar +'<strong>'+ author +'</strong> пишет:<br />'+ comment_preview +'</li></ol>';
При этом имейте виду, что работа скрипта привязана к идентификатору id=”comment-preview”, поэтому при его изменении необходимо будет заменять его во всем скрипте.
На основе данного варианта скрипта предпросмотра комментария я создал плагин для WordPress. Следующий постом будем выложена информацию по этому плагину.
автор: Dimox | рубрика jQuery
В предложенном примере можно для удобства (теоретически, в jQuery пока не гуру ;)) после нажатия кнопики “предпросмотр” сделать возвращение к редактированию комментария по клику на области предпросмотра или даже по jQuery-событию hover
Iam, думаю, что смогу это сделать. Только, ИМХО, лучше переключать по клику, а не по событию hover.
Немного подтюнинговать можно, вставкой даты и времени отправки комментария.
Ещё один плагин теперь пополнит список постоянно используемых мной. Спасибо!
Спасибо, скрипт замечательный, а что делать, если вместо html кодов, используются bb-коды?
Потребуется переделывать скрипт.
а что именно? в какую сторону копать? Может быть есть какая документация по теме или faq?
В скрипте есть вот такой кусок кода:
2
3
4
5
6
7
8
9
10
11
12
13
.replace(/(<\/blockquote[^>]*>)/g, '$1\n')
.replace(/\r\n/g, '\n')
.replace(/\r/g, '\n')
.replace(/\n\n+/g, '\n\n')
.replace(/\n?(.+?)(?:\n\s*\n)/g, '<p>$1</p>')
.replace(/<p>\s*?<\/p>/g, '')
.replace(/<p>\s*(<\/?blockquote[^>]*>)\s*<\/p>/g, '$1')
.replace(/<p><blockquote([^>]*)>/ig, '<blockquote$1><p>')
.replace(/<\/blockquote><\/p>/ig, '</p></blockquote>')
.replace(/<p>\s*<blockquote([^>]*)>/ig, '<blockquote$1>')
.replace(/<\/blockquote>\s*<\/p>/ig, '</blockquote>')
.replace(/\s*\n\s*/g, '<br />');
Он заменяет HTML-теги в момент предпросмотра.
А для тегов, которые вставляются кнопками, есть вот такой код:
2
var end = '</'+button_id+'>';
Насколько я понимаю, нужно заменить угловые скобки на квадратные (но там, где регулярные выражения - не везде).
Документация по теме - это руководства по JavaScript.
Все, спасибо, я уловил суть. Попробую.
А как скачать пример?
Сначала написал на вашей англ.яз версии сайта, т.к. эту нашел позже, извините. Повторю вопрос, уже в более актуальном месте.
Поставил плагин, работает, потом в файле css темы, изменил
2
3
4
width: 550px;
height: 140px;
}
На:
2
3
4
5
6
7
8
font: 12px Arial, Helvetica, sans-serif;
width: 98%;
height: 120px;
background:#fefefe;
border: 1px solid #e6e6e6;
padding: 2px 3px 3px 7px;
}
осталось только “Просмотр”, а кнопки “Ж”, “I” и т.д. исчезли, как решить проблему?
Причина не в стилях, а в настройках плагина.
А как тогда объяснить, что если возвращаю первичные свойства, то опять плагин начинает работать нормально. Или как с новыми свойствами заставить его работать.
Все проблему решил, извините, почему то сбилась настройка включить “html” редактор
А где же html-редактор, который обещан здесь http://dimox.name/live-comment-preview-theory?
Он реализован в плагине.
А как его реализовать в скрипте?
Плагин мне по некоторым причинам не подходит.
Дорабатывать его нужно.
Можете подсказать, как? Попытаюсь доработать.
Наверное, можно взять часть функционала из плагина?
Только какую?
Да, можно взять код из файла jquery-comment-preview.js, который формируется плагином. Но что конкретно, сказать не могу. Это требует времени на тестирование.