Главная › JavaScript

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

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

Сегодня предлагаю вам второй вариант моего скрипта для предпросмотра комментария.

Смотрим готовый пример. Скрипт находится в исходном коде данного примера.

Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, необходимы знания технологий 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 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 - не показывать
	/* === конец настроек  === */
  4. Написать CSS-код для блока предпросмотра под свой сайт, либо воспользоваться готовыми стилями из моего примера.
  5. Если вам очень захочется поменять HTML-код блока предпросмотра, то он представлен в скрипте следующей строкой:
    var preview_html = '<ol id="comment-preview"><li>'+ avatar +'<strong>'+ author +'</strong> пишет:<br />'+ comment_preview +'</li></ol>';

    При этом имейте виду, что работа скрипта привязана к идентификатору id="comment-preview", поэтому при его изменении необходимо будет заменять его во всем скрипте.

На основе данного варианта скрипта предпросмотра комментария я создал плагин для WordPress. Следующий постом будем выложена информацию по этому плагину.

Смотрите также

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Iam
    15 лет 3 месяца назад

    В предложенном примере можно для удобства (теоретически, в jQuery пока не гуру ;)) после нажатия кнопики «предпросмотр» сделать возвращение к редактированию комментария по клику на области предпросмотра или даже по jQuery-событию hover

  2. Dimox
    15 лет 3 месяца назад

    Iam, думаю, что смогу это сделать. Только, ИМХО, лучше переключать по клику, а не по событию hover.

  3. GogA
    15 лет 3 месяца назад

    Немного подтюнинговать можно, вставкой даты и времени отправки комментария.

  4. WOLF-BESPREDEL
    15 лет 3 месяца назад

    Ещё один плагин теперь пополнит список постоянно используемых мной. Спасибо!

  5. odys
    14 лет 10 месяцев назад

    Спасибо, скрипт замечательный, а что делать, если вместо html кодов, используются bb-коды?

    • Dimox
      14 лет 10 месяцев назад / ответ на коммент odys

      Потребуется переделывать скрипт.

      • odys
        14 лет 10 месяцев назад / ответ на коммент Dimox

        а что именно? в какую сторону копать? Может быть есть какая документация по теме или faq?

        • Dimox
          14 лет 10 месяцев назад / ответ на коммент odys

          В скрипте есть вот такой кусок кода:

          .replace(/(<blockquote[^>]*>)/g, 'n$1')
.replace(/(</blockquote[^>]*>)/g, '$1n')
.replace(/rn/g, 'n')
.replace(/r/g, 'n')
.replace(/nn+/g, 'nn')
.replace(/n?(.+?)(?:ns*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*ns*/g, '<br />');

          Он заменяет HTML-теги в момент предпросмотра.

          А для тегов, которые вставляются кнопками, есть вот такой код:

          var start = '<'+button_id+attribs+'>';
var end = '</'+button_id+'>';

          Насколько я понимаю, нужно заменить угловые скобки на квадратные (но там, где регулярные выражения — не везде).

          Документация по теме — это руководства по JavaScript.

  6. Polski
    14 лет 10 месяцев назад

    А как скачать пример?

  7. Дмитрий
    13 лет -1 месяц назад

    Сначала написал на вашей англ. яз версии сайта, т.к. эту нашел позже, извините. Повторю вопрос, уже в более актуальном месте.

    Поставил плагин, работает, потом в файле css темы, изменил

    #commentform textarea {
    width: 550px;
    height: 140px;
    }

    На:

    #commentform textarea {
    font: 12px Arial, Helvetica, sans-serif;
    width: 98%;
    height: 120px;
    background:#fefefe;
    border: 1px solid #e6e6e6;
    padding: 2px 3px 3px 7px;
    }

    осталось только «Просмотр», а кнопки «Ж», «I» и т. д. исчезли, как решить проблему?

  8. Ksana
    12 лет 7 месяцев назад

    Более того, во второй вариант я решил добавить кнопки html-редактора, чтобы избавить комментатора от необходимости набирать html-теги вручную.

    А где же html-редактор, который обещан здесь dimox.name/live-comment-preview-theory?

  9. Ksana
    12 лет 7 месяцев назад

    А как его реализовать в скрипте?
    Плагин мне по некоторым причинам не подходит.

  10. Ksana
    12 лет 7 месяцев назад

    Можете подсказать, как? Попытаюсь доработать.
    Наверное, можно взять часть функционала из плагина?
    Только какую?