jQuery Comment Preview WordPress Plugin
50410'
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-previewfolder 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 Previewpage. - If it’s necessary, you can edit CSS styles for comment preview block in the
jquery-comment-preview.cssfile. - 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.phpfile 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
nameparameter of thetextareatag, but not toid; - solved the problem, when in some cases preview did not work;
- the plugin’s JS and CSS files connects now in the
headsection of the page code; - jQuery now comes from Google.
- Version 0.1.4 (06.20.09):
- added ability to indicate the value of the
idacoderibute of thetextareatag; - added ability to insert comment date and time in preview block template;
- added the option for displaying avatars from gravatar.com.
- added ability to indicate the value of the
- 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 thewidthparameter of#jquery-comment-wrapand#jquery-comment-previewidentifiers, which are in thejquery-comment-preview.cssfile.
- 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.
Webs, Hauptwort, it seems like WordPress bug. I think I fixed it.
Download and replace this file – http://plugins.svn.wordpress.org/jquery-comment-preview/trunk/jquery-comment-preview.php
Thank you Dimox!
very nice
hellow
It sort of worked, I got my site back, but now I get the following:
Warning: include_once(***/wordpress/wp-content/plugins/jquery-comment-preview/jquery-comment-preview.php) [function.include-once]: failed to open stream: Permission denied in ***/wordpress/wp-settings.php on line 175Warning: include_once() [function.include]: Failed opening '***/wordpress/wp-content/plugins/jquery-comment-preview/jquery-comment-preview.php' for inclusion (include_path='.:/usr/share/php:/usr/share/pear') in ***/wordpress/wp-settings.php on line 175Got it, I had to change ownership, group, and permissions on the file after I moved it. All seems well now, time to test the plugin.
Excellent.
Nice plugin……………
Great plugin, the button quicktags is what I was searching for but this is even better, thanks
Great plugin, I’m having a problem with the code tag though. I need it to use [ code ] not use <code> but I can’t figure out how to do it, i’ve tried just replacing the tags, but the button disappeared.
Find the following piece of code in jquery-comment-preview.php and replace brackets:
var start = '< ' + tag + attribs + '>';
var end = '';
} else {
var start = end = '';
}
} else if (tag == 'img') {
var start = '';
var end = ' < ' + tag + attribs + ' />';
} else {
var start = '< ' + tag + attribs + '>';
var end = '';
Thanks, it worked
actually, it did work, but the other buttons don’t work correctly now >.<
Which “other”?
not working on mine..
any suggestion?
here’s http://www.kerjaan-bocah.tk/blog/2010/10/kenalkan-saya-visual-prolog/
Most likely the reason in Google Analytics plugin (used on your site), which changes the code of script, created by my plugin.
so, any suggestion to solve this problem?
or i must deactivate the google analytic?
Yes.
nope dude, it’s not working though i have deactivate the google analytic thing..
Same here. I disabled Google Analyticator, and many other plugins. Even with the WP default theme it does not work (so I guess it’s not my theme). I’ve read above other having problems by placing the blog in a /blog subdir (as I do). Could be that?
It’s not javascript problem :( (Firebug reports nothing). Even the preview buttons are not shown. ??
Where I can look?
No problem: as you said it was because my blog being on a /blog subdir. I eventually moved to another plugin (I wasn’t able to fix it on my own) until you release a new version. :-)
I’m gonna try it. Looks nice :)
Great plugin. thanks!
great tool, thanks
Nice plugin! Here’s my problem. I’m testing in on a test site. I tweaked the CSS so that it looks very nice when I hit the preview button. Then, I remembered that my real site uses the tinymce editor for comments. When I turned it on in my test site, I have a problem.
When I hit “preview”, my nicely formatted preview box comes up, but the tinymce editor and original comment box do not go away. Any ideas?
Plugin is not compatible with tinymce editor for comments.
Thanks! And you do a lot of goodies for the community b.t.w
Does this work with Hikari Titled Comments?
Are you using one or more Wordpress plugins for these comments? If you are, what are they?
Don’t know.
Only Greg’s Threaded Comment Numbering.
Hey,
I love this plugin BUT, I also have the autoexpander plugin applied to my comment field, and it works until you preview the comment. At this point any other jquery or javascript applied to the text field is unceremoniously disabled, resulting on toggling back to a text area that no longer auto expands.
So, I looked at the php and found the javascript you use, and modified it.
Changelog:
- Reduced DOM manipulations to a minimum
- A cloned text area is no longer created and destroyed on every preview
- The original text area is preserved
- The preview html is inserted after the textarea, not inside the textarea element
- The jquery object selecting the preview html and the original text area is held as a variable
Overall my modifications should increase javascript performance and prevent many conflicts with other jquery plugins and javascript. Not to mention halving the number of lines in that particular portion of code
You may find a universal diff/patch here:
http://darkstars.co.uk/jquery-comment-preview.php.patch
I would also note that you should add underline and strikethrough buttons to the html editor bar, by default
Also here is a snippet that should conditionally display the html tags text on the comment form depending on wether this plugin is installed or not:
$args = array();
if(function_exists ('jcp_get_version')){
$args['comment_notes_after'] = '';
}
comment_form($args);
And CSS to make the textarea the correct width and close the gap at the top:
#jquery-comment-wrap #comment {
margin-top: 0px;
width: 510px;
}
Further improvements I may make include animation effects, which should be a very easy simple procedure given my simplifications.
I hope this helps
I’m not interested in preview after textarea.
And neither am I, you misunderstand, my changes do not alter the observed behaviour, only the internal mechanics, if you had looked at the patch you’d see that the text area element is hidden when previewing is toggled on, and that the preview is only active when toggles on. The preview and the text area are never visible at the same time.
Because you were inserting the doc inside the textarea element, you needed a cloned textarea element to copy it all into. Simply putting the div after the textarea in it’s wrapper and hiding the textarea element gives the same effect but with fewer Dom manipulations and preserving any other JavaScript attached to the textarea
As far as the end user is concerned there’s is no difference. This patch is a bugfix, not a feature add-on or a rehash.
I read again your comments and understand that not properly understood them earlier, sorry =(
Thanks for your patch! I will use it in the next version.
Love the plug. I’m having a few problems and was wondering if you could spare some time.
1. I cant get those html editors to appear on the left bar.
2. I can’t seam to find the css to change the style of the date and time. I tried ol#comment-preview .date but it doesn’t seem to work.
3. I would like the gravatar image to be 80px but everywhere in the php that I see gravatar size I change the number to 80 but it doesn’t seem to change it.
Sorry if these are dumb questions. Hope you can help
1,3 – change plugin’s options.
2. You must firstly add this class in template of preview.
Thanks Dimox.
1,3 – I changed the options to =1
2. Where should I add this class on the php? Im looking for the spot.
I swear I’m good at css, I think it’s the php that is throwing me off.
jQuery Comment Preview Options – Preview block template
Nice Plug-In Thanx Dimox. I Using My Personal Blog. Very Interesting.
WP Super Cache will break the javascript view of this plugin. The fix is simply to change the URL for which it serves JS. Change:
'/?jquery-comment-preview.js?'to
'/?f=jquery-comment-preview.js&'With this in place, WP Super Cache’s .htaccess RewriteCond will catch the querystring and not take over caching.
Okay. Thanks. I will change this in next version.
Pretty cool actually :)
Hey Dimox
this plugin is genius, but I have a little issue, I guess it probably comes from my themes, but I’d rather ask before spending more time (already try to trouble shot for the last 3 hours).
When i turn the html tags on , then the comment box with preview disappear ( I left the settings as described if you want to check out the code)
thanks a lot for your help
oups I forgot to give you an url :
http://cafecroissant.fr/2010/sarkozy-20-mensonges-1-minute/
The reason in the text
Entrez l'URL, which is in translation file. At the moment there can not use a single quotation mark. I will fix this in the next version of the plugin.Hi Dimox,
I’ve translated your awesome plugin in Italian. Please, could I send you the .po & .mo files?
Thanks for your attention
Best Regards,
Gianni Diurno
gidibao.net
PS
My WP-Plugins/Themes translation works (sample) | http://gidibao.net/index.php/portfolio
I still have no idea how can you use it, could someone tell me, what exactly do i need to do to use it in my website ?
This is a great plugin and it works works fantastically and so quickly!! Thanks so much.
I am, however, having an issue where smilies -using Smilies Themer & Toolbar- aren’t appearing.
Is there a way to address this so that the preview will translate smilies codes (i.e. ;P or :sadface: or *w00T*) accordingly?
Actually, I’ve worked out that there is indeed an option. I guess it pays to RTFM sometimes. :X My only issue now is that this option -which introduces the smilies button, has now rendered my smilies toolbar useless.
Is there a way that I can continue to use the Smilies Themer Toolbar and forgo the use of the smilies button?
Plugin can display only default WordPress smiles.
Hi Dimox,
I like this plugin so much …
but it doesn’t work on my website.
I think it’s the theme, (it doesn’t translate the comments area to)
Do you know a way to fix this?
Website:
Langs de Maas
Ehhh… I spoke to soon.
Got it working now!
Hi there, i’m tring to use this great plugin, but i can’t fix a problem, when i prewiev the comment it shows all the comment text in 1 line, so the goes outside the comment area… i tried to fix the css, create a class to declare the width etc but nothing helped, can u help to fix this problem please?
Solved, it where a nowrap in my css. Thanks, anywhay! ;)
Hi,
Somehow the quicktags doesn’t display in the comments box. any ideas?
Where can I see this?
Nice great plugin!
However, I want this plugin can integrate with other shortcut, like:
<pre lang="php"></pre>And:
[cc_php][cc_php]For use CodeColorer plugin.
Thank You!
You can add this by yourself in a plugin options.
No it doesn’t work with that rules, have try by your self?
I have try with this option:
code PHPnotes: I use space to make it display in this comment, reality I’m not use these space.
Or have you any other suggestion for code syntax highlight?
I realy want to make the code for
<pre></pre>and/or also for other shortcut like[cc_php][cc_php].Thank You
For html tags it works fine. You doing something wrong. Look at my editor panel above the comment form, I’ve added the “pre” button.
Thank you, how to implement in option?
I’m using this:
(button tag=”pre” lang=”php”)(/button)
but it doesn’t work.
i replace the with this () to make it display in this comment.
The right code for this button:
<button tag="pre">pre[lang="php"]</button>There are instructions on how to add buttons. Do not you understand them?
Woops, sorry! OK it works now! Thanks.
But, bad news is the Code Syntax for plugin CodeColorer and also WP-Syntax inserting div tag around the pre/code tags. So complex :(.
Well now I’ll just use the normal css code.
It worded on my blog. But I want to add image tag, likely on HTML of Add New Post, at HTML. What have I to do?
Activate HTML editor on the plugin options page and add template for image button in accordance with the instructions.
I activated HTML editor and add in HTML code of a buttons of the editor tag:
Image[src="" alt=""]
But I want to click this image tag, it must appear dialog “enter url of image” and “title of image”.
Unfortunately there is no such a possibility.