jQuery Comment Preview WordPress Plugin
Description
jQuery Comment Preview WordPress Plugin allows the live comment preview without page reboot. It works on jQuery.
Requires WordPress version: 2.5 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 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Since version 0.1.5 plugin have a new template of a HTML editor buttons. Therefore when upgrading the plugin from earlier version to 0.1.5 or higher it is necessary to do following:
- If you have changed the default preview block template, save it somewhere on your computer.
- Click the “Reset Defaults” button at the bottom of the plugin options page.
- Now you can again setup an options if you needed.
If not reset the plugin’s options, it may not work.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Attention: knowledge of CSS and HTML may require for using a plugin.
jQuery Comment Preview WordPress Plugin
Version: 0.1.6 | Total downloads: 5068 | Last updated: 2010-01-05
Donation
If you enjoy this plugin, you can thank me and leave a small donation.
Installation
- Upload jquery-comment-preview folder to the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in admin interface of WordPress.
- Play once with the width parameter of #jquery-comment-wrap, #jquery-comment-preview and #comment_preview identifiers (which are in the jquery-comment-preview.css file) to fit the width under your design.
- 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 other 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="jquery-comment-wrap">
<div id="jquery-comment-preview">
<div id="html-editor">
<a>button</a>
<a>button</a>
...
</div>
<div id="preview-tab">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 comments.php file of your theme has the following code:
<?php do_action('comment_form', $post->ID); ?>If not, insert it before the </form> tag.
- If the first 2 points are not solved the problem, give details in comments to this post.
- Plugin “jQuery Comment Preview” may not work if you have installed the plugin OpenID.
Version history
- 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 attribute 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 formatting in preview; deleted automatic fitting 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.
Thanks Dimox. Got it sorted.
I’ve another question if you can help. I have just noticed a problem with the html-editor’s button. When I highlight a sentence to style it, I click ‘b’ button (for example to bold the sentence) the html tags appears AFTER the sentence.
I noticed your preview box here works well with the sentence in between the tags, is that something I need to change in the plugin downloaded or a setting to configure at the admin panel? The only changes I made to the plugin is the css file.
Thanks
Looks to me like you’re using an old version of the plug-in here. When I use the new version in IE8, blockquote doesn’t work and the textarea box is in the wrong place.
Also doesn’t work on Pages.
Am in the process of trying to recall and restore a hack or two that I did that utilized the simple editing bar and another preview application.
If you solve the problem or have any suggestions, I’d of course much rather stick with your new version!
coq10, what browser you are using (and his version)?
CK MacLeod,
What you mean?
Show me an example.
I have tested plugin on Pages and it works for me. Also please show me an example of such a page.
Hi Dimox,
I’m using IE8. Thanks
coq10, this problem occurs in all version of IE. As soon as I will find a solution, I’ll release a new version of plugin.
Hi Dimox,
Appreciate your prompt reply. I was wondering if I had did anything wrong to the plugin as I’m using IE8 to surf your site too and the tags work fine. Thanks for the consistent effort you put forth in the plugin, looking forward to your new version of plugin!
Dimox, thanks for your reply.
The problem I mentioned regarding blockquote on IE8 is the same one that coq10 describes.
On further examination, I find that the “not working on Pages” problem appears to be a commonly occurring problem relating to multiple plug-ins that use the textarea comment ID and come into conflict when used at the same time.
If you developed a comment plug-in that combined Reply/Quote functionality (see, e.g., Comment Tooblar plug-in) with HTML mark-up/editor, it might be very popular, since combining the two can be very tricky where it’s possible at all on Wordpress. Other comment text formatters that employ the CKeditor or similar more sophisticated text editors likewise conflict both with your plug-in and with reply/quote plug-ins.
The IE8 formatting problem: The comment textarea box floats to the center of the page, even overlapping the sidebar. I haven’t made a major effort to analyze or fix the problem because my blog is active, and because I don’t want to employ the plug-in while the conflicts and bad formatting are occurring. I can provide you with a screenshot and or page source code if that would be helpful.
Best,
CK
Okay, I will look what I can do about this.
Without a live example it’s hard to me to determine a cause.
I’d be happy to assist if I could somehow. The writer of the “Quote Comments” plug-in – at got part of the way toward integrating a “Quote the comment function” with the MCE Comments plug-in.
I didn’t fully test it on multiple browsers partly because there was some weird formatting behavior, also because MCE Comments has minor problems of its own along these lines. The Comment Quotes solution isn’t very clean, but it’s the closest any I’ve tested comes to combining both features.
If you’re not getting a mal-formatted comment box on IE8, it may have something to do with the peculiarities of my theme. I’ve been meaning to set-up a “test” blog so that I could experiment without upsetting the flow at my regular blog, and, when I do, I’ll provide you with examples.
The writer of the Wp NicEDIT plug-in also looked into the problem of multiple plug-ins conflicting over the textarea, but, after hacking his own solution never developed one for broad application. If you poke around in the comment threads, you will find a familiar discussion of the conflicts and eventually a more detailed discussion of partial solutions.
Thanks!
CK
Trying out the plugin.
I just installed 1.6, and, whatever you did, you seemed to have solved the conflict problem that was preventing your app from loading and functioning on Pages, and the conflicting with Comment Toolbar also seems to have disappeared.
The problem with the textarea box floating into the middle of the page seemed to have resulted from some curious combination of my theme and IE8 in “Compatibility View.” I don’t even recall any longer why I preferred viewing the site in CV when on IE8, but other aspects of the site look marginally better in regular IE8 anyway.
If you want to view the problem and try to figure out why it’s happening, you can check any comment thread on the site – such as this one. (Still not sure which stray parameter is preventing the textarea box and the bar from matching up better, but haven’t looked the problem over yet.)
I don’t see any problems in IE8.
Are you viewing it in Compatibility View?
I saw now. There are a conflict with another JavaScript scripts used on your site. I don’t know how to resolve this.
Well – I probably keep things as they are unless I get a lot of complaints. How many IE users regularly browse using Compatibility View? I’m currently building up another site under a different theme and will see if and when and how the glitch recurs.
Is there any way to put an IMAGE tag?
I tried with
Image
Image
etc, etc…
Thanks! By the way, great plugin…
ElPerro, read instructions on plugin options page.