Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

jQuery Comment Preview WordPress Plugin

jQuery Comment Preview WordPress Plugin allows the live comment preview without page reboot. It works on jQuery.

Requires WordPress version: 2.9 or higher.

You can see an example on a current site.

Plugin features

  • Live comment preview, which does not take that extra space on the page.
  • Simple HTML-editor (instructions on using the editor are on the plugin options page).
  • You can customize comment preview block as you wish. You can display: comment author name, avatar (static or dinamic using gravatar.com), comment date and time, comment text. All this can be designed with CSS.
  • You may don’t connect plugin’s CSS file (optional) if you wish to reduce number of queries to your server.
  • Plugin’s JS and CSS files are connected only on the pages with comment form.

Download

Attention: knowledge of CSS and HTML may require for using a plugin.

jQuery Comment Preview WordPress Plugin

Version: 0.6 / Last updated: 2013-06-06

Installation

  1. Upload jquery-comment-preview folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in admin interface of WordPress.
  3. If it’s necessary, you can customize options in admin interface at the Options → jQuery Comment Preview page.
  4. If it’s necessary, you can edit CSS styles for comment preview block in the jquery-comment-preview.css file.
  5. That’s all.

HTML code of preview block

The plugin creates the following structure of HTML code for the preview block (this may be useful in the design through CSS):

<div id="jcpWrap">
  <div id="jcpToolbar">
    <div id="htmlEditor">
      <a>button</a>
      <a>button</a>
      ...
    </div>
    <div id="previewTab">Preview</div>
  </div>
  <textarea name="comment"></textarea>
</div>

If nothing works

  1. Make sure that you use the appropriate version of WordPress, which is required for a plugin work.
  2. Make sure that the header.php file of your theme has the following code:

    <?php wp_head(); ?>
    

    If not, insert it before the </head> tag.

  3. If the first 2 points are not solved the problem, give details in comments to this post.

Version history

  • Version 0.6 (2013-06-06):
    • now the plugin connects jQuery bundled with WordPress;
    • script now supports jQuery 1.9 and higher.
  • Version 0.5.1 (2013-02-04):
    • fixed: plugin did not worked when WP_DEBUG was enabled.
  • Version 0.5 (2011-09-10):
    • now if there is no selected text while inserting the URL, then a link itself becomes an anchor;
    • added ability to insert a link to an image through a dialog box.
  • Version 0.4 (2011-03-19):
    • optimized jQuery script;
    • changed the names of identifiers of blocks, made appropriate changes in the CSS file;
    • fixed a bug when using the single quote in the translation file and in the template of preview block;
    • changed the default template of preview block;
    • the tag <script></script> now cuts from the template of preview block;
    • modified the path to the jquery-comment-preview.js file;
    • minimized the md5.js file.
  • Version 0.3 (2010-09-23):
    • this version works on WordPress 2.9 or higher;
    • fixed: plugin did not worked, if “WordPress address” and “Blog address” differed;
    • now you can use single quotes in the text of preview button;
    • added the “About the plugin” button;
    • optimized the system of settings.
  • Version 0.2 (05.02.10):
    • text links in the preview now are clickable;
    • new option: ‘Add the target=”_blank” parameter to external links';
    • new option: ‘Show button with WordPress smilies’ – uses build-in WordPress smiles;
    • added French localization (thanks to Wolforg).
  • Version 0.1.7 (03.18.10):
    • solved the problem, when preview did not work until the “Update Options” button not been pressed on a plugin options page;
    • jQuery 1.4.2 is now connected instead of jQuery 1.3.2.
  • Version 0.1.6 (01.05.10):
    • solved the problem, when a tags have been inserted incorrectly in Internet Explorer when using the HTML editor;
    • adding a link now works like in WordPress HTML editor – when ‘link’ button is clicked, there appear a window for entering a URL.
  • Version 0.1.5 (12.20.09):
    • the design of preview panel has been changed. Now it looks like WordPress HTML editor;
    • the structure of the template of the HTML editor has been changed;
    • the script connects now to the name parameter of the textarea tag, but not to id;
    • solved the problem, when in some cases preview did not work;
    • the plugin’s JS and CSS files connects now in the head section of the page code;
    • jQuery now comes from Google.
  • Version 0.1.4 (06.20.09):
    • added ability to indicate the value of the id acoderibute of the textarea tag;
    • added ability to insert comment date and time in preview block template;
    • added the option for displaying avatars from gravatar.com.
  • Version 0.1.3 (02.07.09):
    • fine-tuned filters of text formacodeing in preview;
    • deleted automatic ficodeing the width of the preview panel under width of a <textarea> field, now need to change its width through CSS, for this you need to play once with the width parameter of #jquery-comment-wrap and #jquery-comment-preview identifiers, which are in the jquery-comment-preview.css file.
  • Version 0.1.2 (12.19.08): the changes associated with incorrect display of the comment form in Internet Explorer on some WordPress themes.
  • Version 0.1.1 (12.17.08): fixed bug: the comment can not be submited.
  • Version 0.1 (12.16.08): the initial version.

Cоmmеnts (187):
  1. 126

    i like it

  2. 129

    Hey there. http://cl.ly/B6O6 this is my problem. Used to work… any ideas what happened?

  3. 134
    @
    japanworm said:

    Hello again.
    I’ve been using this plugin for a while now and I really like it.
    I only have one really tiny issue with it.
    As you have to set the “name” tag of the “textarea” which is “comment” in most cases, the preview/hide bar also displays in my contact form of my contact.php as that also uses ‘name=”comment” for the textarea. Changing that name results in my contact-form not working properly anymore.
    That’s why I wanted to ask if there’s another way to assign the toolbar to the comment-form textarea only? E.g. instead of using the name=”” option, maybe id= or something? Or maybe via a special class=?

  4. 137

    Nice plug in.
    Is there a way the plugin can publish the comments immediately the user clicks the post button and the comments can be categorized when posting e.g for buyers,sellers etc such that if am a seller i just need to go to the seller tab and post my comments there and same for a buyer or even an all section where all comments can appear and also maybe have a search box for searching the posted comments.
    The image linked below shows what am talking about
    http://farm7.static.flickr.com/6218/6351664270_27b100de66_z.jpg
    Your response will be of great help.
    Joseph.

  5. 140
    @
    japanworm said:

    Hello again.
    I’m sorry that I have to bother you again. I’m not even sure if this is a particular problem with your plugin or not.

    I added some more buttons for font-size and “underlined” text.
    It works fine, however if somebody uses Internet Explorer to post a comment the following commands do not work:

    underlined text:
    underlined

    big text:
    big
    big

    small text:
    small
    small

    Is there something else (and valid) that I could use instead, so that it will be displayed properly in the comment afterwards?
    Strangely enough it displays correctly in the preview (text IS underlined or big/small), but once posted it’s not!
    Internet Explorer still can display underlined (or big/small) text properly that other users wrote in other browsers.

    Here are some screenshots to help you understand:

    A comment preview written in Internet Explorer:
    http://i41.tinypic.com/zkfsz5.jpg

    How a comment is displayed that was written in Internet Explorer:
    http://i41.tinypic.com/15nt1ti.jpg

    How a comment is displayed that was written in Firefox:
    http://i44.tinypic.com/67qm3l.jpg

    All with the exact same code!

    • 141

      You need to specify font size for these tags:

      big {font-size: 16px}
      small {fomt-size: 10px}

      • 142
        @
        japanworm said:

        Hello.
        Thanks for your quick reply.
        I already tried that as well. It doesn’t make a difference.
        Also, this has nothing to do with the “underlined” span tag which also doesn’t work. Something else must be interfering.

        First of all, I think it’s strange that it’s displayed correctly in the preview but not in the actual post (and that only in Internet Explorer).
        Almost as if something is modfied in the text once an IE user clicks the “send” button.

        Very mysterious.

      • 143
        @
        japanworm said:

        After testing some more I found out that it has nothing to do with the browser.
        When I’m logged in as admin I can use underlined and big/small font. When I’m just a normal user (not registered) I cannot use it. It will display properly in the preview, but the code won’t go through once the comment is sent.

        Looking at the standard code you use here, too, I only could successfully implement the “stroke” (del tag), but not underlined, big/small font. Is that not possible at all with your plugin or do I have to edit the actual php file of your plugin?

        • 144
          @
          japanworm said:

          I found the solution. I’m posting again just in case others have the same issue.
          It has to do with the allowed tags of WordPress.
          “big”, “small” and “span” tags aren’t allowed by default, but you can enable them if you post the following into your function.php (just add the tags you want to use):

          add_filter('comments_open','eg_allow_tags_in_comments');
          // For making it sure, we also force the tags again before comment approval
          add_filter('pre_comment_approved','eg_allow_tags_in_comments');
          function eg_allow_tags_in_comments($data) {
          // This variable is in wp-includes/kses.php file, check it out
          global $allowedtags;
          // You can add HTML tags and their properties by this way
          $allowedtags['span'] = array('style'=>array());
          $allowedtags['big'] = array();
          $allowedtags['small'] = array();
          // And we return our expanded data for comment approval
          return $data; }

          More about it here.

  6. 145

    Could you please make it work with wp-syntax plugin? So the code in the preview would be highlighted just as it would be in the submitted comment?

    echo "test"; 

    The output of this should be highlighted as php code.

  7. 151

    Hi, thank you for this great plugin. I have a question:
    What is the best way to add a button for a pointed list? Thank you for the support!

  8. 153

    I just tried it on 3.3 and trunk ~3.4, not working. I’m using a Hybrid child theme… thanks.

    • 154

      For me works without any problems.

      • 155

        Alright, I got it working. Just tested now on 3.4 trunk. The problem on my site wasn’t the child theme or WordPress version, I believe it has to do with my site’s directory structure; my blog is at the root rather than at a subdirectory.

        I only noticed this after poking around in Firebug… I had to change line 603 to use get_bloginfo('siteurl') instead of get_bloginfo('wpurl') for loading the script.

  9. 157

    Is this plugin not supported and unavailable now, because the download link above doesn’t work. :(

    • 158

      The plugin is still supported. For some reasons it disappeared from list of my plugins on WordPress.org. I’ve added alternative download link in post.

  10. 159

    ve ry nice plugin… i like it

  11. 160

    Hi,

    thanks

  12. 161
    YeMeNi AnA said:

    thank u

  13. 162
    @
    DarkWolf said:

    Is there any way to make it workable also in bbpress plugin (forum installed inside wordpress) page? :)

  14. 164

    Is it possible to add more button for custom css class I made before?
    I’m sorry and thanks.

  15. 169

    Unfortunately, when wp-debug is enabled, there is a warning:
    Notice: load_plugin_textdomain was called with an argument that is deprecated since version 2.7 with no alternative available. in (my domain)\wp-includes\functions.php on line 2925
    and the plugin is not loaded.
    I try using the last version of WordPress and the default theme and also deactivate another plugins.
    Have you a future plan to update the plugin?

    I’m sorry and thanks.

    • 170

      For now I not see a sense to change something, because plugin is working while wp-debug is disabled.

      May be sometime I will fix that.

    • 171

      Already fixed =)

      I did not think that it will be so easy. Changed just one row.

      • 172

        Many thanks.
        It works now even there is still a warning about a deprecated argument: Notice: has_cap was called with an argument that is deprecated since version 2.0! Usage of user levels by plugins and themes is deprecated. Use roles and capabilities instead. in (mydomain)\wp-includes\functions.php on line 2923.
        Actually I don’t understand that, I’m only a regular WordPress user but everytime I want to use a plugin I always activate the wp_debug to know if there’s a warning.
        Anyway, many thanks for your quick support and I’m sorry for many complaints I write here.

        • 173

          I have fixed this also. I not recommend to turn on the wp_debug, because it is intended for plugin developers, not for regular users like you.

          • 174

            Thanks so much.
            And about wp_debug, I rarely activate it because I write my theme from a starter blank theme, adding or deleting some functions so some times I need to do that. There is also a plugin for theme development that recommends me to do that. I know just a very-very basic knowledge about theming, but not plugin. That’s all is in my local computer not my live blog. After everything is fixed in my local computer then I go to try in my live blog. It’s just like a habit and an hobby when finding something new I wanna use it.
            Now I use your plugin in my live blog.
            I’m sorry and thanks again for your support. Nice to know you and your blog.

  16. 175

    Just a question: is there any future plan to make preview unhidden by default?
    I’m sorry and thanks.

    • 176

      No, I’m not planning this, sorry.

      • 177

        Thanks. Anyway the functionality given by your plugin now is enaugh.
        Just another report, your plugin still link to jquery version 1.6.3. This makes some of plugins I’m using don’t work because they need the newest version.
        I’ve manually change jquery-comment-preview.php to load the same version of jquery bundled by WordPress 3.5.1. And it works, but I’m still in doubt about the compatibily.
        I’m sorry and thanks.

  17. 178

    very very nice. I need tag spoiler.
    Thanks

  18. 182
    MorsMora said:

    Hello again,
    I am using this code for the spoiler: {Section: Preview block template}:

    style type="text/css"
    #spoiler {background-color: #000; color: #000;}
    #spoiler:active { background: white; }
    /style

    and Section code {HTML code of a buttons of the editor}:
    button tag="span">spoiler[id="spoiler"] /button

    But there is a problem:
    When is Preview= correct
    But when I send comment= It does not work {And it comes just above text a line}

    Can you help me?

  19. 185

    This plugin doesn’t work on WP version 3.6. My page doesn’t load after the comments section and my footer doesn’t appear. The page loading circle just keeps spinning.

Соmmеnt раgеs: « 1 2 3
Lеаvе а Соmmеnt

© 2009–2014 Dimox.net  •  Privacy Policy