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

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

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

Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, необходимы знания технологий 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. Следующий постом будем выложена информацию по этому плагину.

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

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5
    odys

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

    • 6

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

      • 7
        odys

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

        • 8

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

          .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.

  6. 10
    Polski

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

  7. 11

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

    Поставил плагин, работает, потом в файле 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. 15

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

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

  9. 17

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

  10. 19

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