jQuery Comment Preview WordPress Plugin

50410'

156 Comments

Written by Dimox

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.5 / Last updated: 2011-09-10

Installation

Upload jquery-comment-preview folder to the /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in admin interface of WordPress.
If it’s necessary, you can customize options in admin interface at the Options → jQuery Comment Preview page.
If it’s necessary, you can edit CSS styles for comment preview block in the jquery-comment-preview.css file.
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

Make sure that you use the appropriate version of WordPress, which is required for a plugin work.
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.
If the first 2 points are not solved the problem, give details in comments to this post.

Version history

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.

Category: WordPress, jQuery

Tagged with: comments, jQuery, plugin, preview, WordPress

Next post

Previous post

Cоmmеnts (156):

126

August 26, 2011 at 10:40 pm
adhyhacx said:

i like it

Reply
129

October 20, 2011 at 5:44 am
andrei said:

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

Reply
- 130
  
  October 20, 2011 at 7:53 am
  Dimox said:
  
  What is the problem?
  
  Reply
  - 131
    
    October 20, 2011 at 8:50 am
    andrei said:
    
    Well, I can’t see the bold, italic, etc buttons :-s
    
    Reply
    - 132
      
      October 20, 2011 at 8:59 am
      Dimox said:
      
      Go to the plugin’s options and activate HTML editor.
      
      Reply
      - 133
        
        October 20, 2011 at 12:48 pm
        andrei said:
        
        Thanks a bunch and sorry for being a real noob. Using a plugin to hide dashboard menu items and forgot the plugin has a settings page >.<
        
        Reply
134

@

November 12, 2011 at 9:41 am
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=?

Reply
- 135
  
  November 12, 2011 at 10:06 am
  Dimox said:
  
  Find the following code in jquery-comment-preview.php file:
  
  var textarea = $('textarea[name
  
  and replace name on id.
  
  Reply
  - 136
    
    @
    
    November 12, 2011 at 7:13 pm
    japanworm said:
    
    Awesome. That worked great.
    Thank you so much! :)
    
    Reply
137

@

November 17, 2011 at 4:11 am
joseph said:

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
farm7.static.flickr.com/6218/6351664270_27b100de66_z.jpg
Your response will be of great help.
Joseph.

Reply
- 138
  
  November 17, 2011 at 7:45 am
  Dimox said:
  
  Of course no. This plugin is just for comment preview.
  
  Reply
  - 139
    
    @
    
    November 18, 2011 at 4:22 am
    coucou said:
    
    very nice
    
    Reply
140

@

November 20, 2011 at 12:19 am
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:
i41.tinypic.com/zkfsz5.jpg

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

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

All with the exact same code!

Reply
- 141
  
  November 20, 2011 at 1:03 am
  Dimox said:
  
  You need to specify font size for these tags:
  
  big {px}
  small {fomt-size: 10px}
  
  Reply
  - 142
    
    @
    
    November 20, 2011 at 1:13 am
    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.
    
    Reply
  - 143
    
    @
    
    November 20, 2011 at 7:02 am
    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?
    
    Reply
    - 144
      
      @
      
      November 20, 2011 at 7:17 am
      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.
      
      Reply
145

December 7, 2011 at 5:12 am
Jim said:

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?

<pre lang=”php”>echo “test”; </pre>

The output of this should be highlighted as php code.

Reply
- 146
  
  December 7, 2011 at 5:13 am
  Jim said:
  
  Also another problem is that in preview the symbol &#60 shows up as < but after posting it stays as text.
  
  Reply
  - 149
    
    December 7, 2011 at 8:34 am
    Dimox said:
    
    Just use < instead of &#60.
    
    Reply
  - 150
    
    December 8, 2011 at 12:18 pm
    Jim said:
    
    Just wanted to let you know that i did what i wanted. Scroll down to comments check it out www.ituts.gr/?p=2914 :)
    
    Reply
- 147
  
  December 7, 2011 at 5:21 am
  Jim said:
  
  Also i had to comment out the following line for the plugin to work.
  add_action('wp_head', 'jcp_jquery', 8);
  
  I think im done with the bug reports :p
  If you want you can mail me to get more info.
  
  Reply
- 148
  
  December 7, 2011 at 8:30 am
  Dimox said:
  
  Sorry, I can’t do this.
  
  Reply
- 156
  
  February 9, 2012 at 8:39 am
  Jordan said:
  
  Very nice!
  
  Reply
151

@

December 30, 2011 at 2:49 am
pesi said:

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!

Reply
- 152
  
  December 30, 2011 at 3:38 am
  Dimox said:
  
  I think you need to add 2 buttons: for ul and for li.
  
  Reply
153

December 30, 2011 at 2:32 pm
Alan said:

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

Reply
- 154
  
  December 31, 2011 at 3:26 am
  Dimox said:
  
  For me works without any problems.
  
  Reply
  - 155
    
    December 31, 2011 at 6:20 am
    Alan said:
    
    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.
    
    Reply

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

Lеаvе а соmmеnt

Click here to cancel reply.

Nаmе *

Еmаil (will nоt bе рublishеd) *

Wеbsitе

Меssаgе

Notify me of followup comments via e-mail