Главная›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 комментариев

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

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

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

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

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

  1. Iam
    17 декабря 2008 г. в 19:21

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

  2. Dimox
    17 декабря 2008 г. в 19:44

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

  3. GogA
    18 декабря 2008 г. в 13:57

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

  4. WOLF-BESPREDEL
    19 декабря 2008 г. в 04:46

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

  5. odys
    25 мая 2009 г. в 00:31

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

    1. Dimox
      25 мая 2009 г. в 08:37 / ответ на коммент odys

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

      1. odys
        25 мая 2009 г. в 16:08 / ответ на коммент Dimox

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

        1. Dimox
          25 мая 2009 г. в 16:45 / ответ на коммент odys

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

          .replace(/(<blockquote[^>]*>)/g, '\n$1')
.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-теги в момент предпросмотра.

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

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

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

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

          1. odys
            25 мая 2009 г. в 17:01 / ответ на коммент Dimox

            Все, спасибо, я уловил суть. Попробую.

  6. Polski
    31 мая 2009 г. в 15:02

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

  7. Дмитрий
    17 апреля 2011 г. в 15:24

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

    Поставил плагин, работает, потом в файле 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” и т.д. исчезли, как решить проблему?

    1. Dimox
      17 апреля 2011 г. в 16:04 / ответ на коммент Дмитрий

      Причина не в стилях, а в настройках плагина.

      1. Дмитрий
        17 апреля 2011 г. в 19:58 / ответ на коммент Dimox

        А как тогда объяснить, что если возвращаю первичные свойства, то опять плагин начинает работать нормально. Или как с новыми свойствами заставить его работать.

        1. Дмитрий
          17 апреля 2011 г. в 20:03 / ответ на коммент Дмитрий

          Все проблему решил, извините, почему то сбилась настройка включить “html” редактор

  8. Ksana
    29 августа 2011 г. в 01:01

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

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

    1. Dimox
      29 августа 2011 г. в 11:11 / ответ на коммент Ksana

      Он реализован в плагине.

  9. Ksana
    29 августа 2011 г. в 12:18

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

    1. Dimox
      29 августа 2011 г. в 12:30 / ответ на коммент Ksana

      Дорабатывать его нужно.

  10. Ksana
    29 августа 2011 г. в 15:14

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

    1. Dimox
      29 августа 2011 г. в 15:36 / ответ на коммент Ksana

      Да, можно взять код из файла jquery-comment-preview.js, который формируется плагином. Но что конкретно, сказать не могу. Это требует времени на тестирование.

      1. Евгений
        4 октября 2012 г. в 14:21 / ответ на коммент Dimox

        Дмитрий, а как собственно вывести саму кнопку предпросмотр?

        Спасибо!

        1. Dimox
          4 октября 2012 г. в 15:43 / ответ на коммент Евгений

          Смотрите пример.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.