I have seen many people asking me how to integrate a simple javascript based editor to wordpress comments form to markup html or bbcode tags. Here is how you do it and its simple.
I will be working on the prototype of this free markup editor and i will be tweaking a bit to make it very simple and later i will be integrating to wordpress comments form. It will insert bbcode or html tags to selected text to wordpress comments form.
Here is how the editor will look like upon integrating to wordpress comments form. Please bear with me that i am keeping it very simple specific to main coding. Later you can play around with styling and colors for buttons.
Step 1:
Go to comments.php which can be found in your theme folder wp-content > themes > yourtheme > comments.php and on the bottom locate this line and remove it. I am assuming that the current theme is twentyten which is wordpress default theme.
<?php comment_form(); ?>
Replace above line with below code
<h3 id="respond">Leave a Reply</h3>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<p>
<input name="author" id="author" value="" size="22" tabindex="1" type="text">
<label for="author">
<small>Name (required)</small>
</label>
</p>
<p>
<input name="email" id="email" value="" size="22" tabindex="2" type="text">
<label for="email">
<small>Mail (will not be published) required)</small>
</label>
</p>
<p>
<input name="url" id="url" value="" size="22" tabindex="3" type="text">
<label for="url">
<small>Website</small>
</label>
</p>
<p>
<small><strong>Tags Allowed:</strong> <?php echo allowed_tags(); ?> </small>
</p>
<p> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/bbeditor/styles.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/bbeditor/ed.js"></script>
<script>edToolbar('comment'); </script>
<textarea name="comment" id="comment" cols="100" rows="10" tabindex="4"> </textarea>
</p>
<p>
<input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
<input name="comment_post_ID" value="<?php echo $id; ?>" type="hidden" >
<?php do_action('comment_form', $post->ID); ?>
</p>
</form>
As you notice from the above code, all you need is just 3 lines to initiate the javascript editor. It should be above textarea.
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/bbeditor/styles.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/bbeditor/ed.js"></script>
<script>edToolbar('comment'); </script>
I will just be using input buttons and wont be using any images to implement this editor. If need be i can specify css code in styles.css to customize the button look.
Step 2:
(i) Create a new folder in your theme, lets say beditor and .
(ii) Depending on whether to insert bbcode or html, download the zip file.
To insert bbcode tags, download this zip file
To insert html tags, download this zip file
You will see 2 files and some images in the zip file. Just place just the ed.js and style.css in your newly created beditor folder. Nothing else needed for the editor to work.
Note: If you want bbcode to be parsed by wordpress, you will need to use this wordpress bbcode plugin without it your bbcodes wont work.
If you have not used css or removed the styles.css file, the editor will look with just buttons.
P.S: I am keeping it very simple and i will just be focusing on the core wordpress integration and later you can play around with css, colors and backgrounds of buttons.
Similar Posts:
- Free Markup BBCode Editor in Javascript
- Free Markup TextArea HTML Editor in Javascript
- Lightweight PHP WYSIWYG HTML Editor
- Free BBCode/HTML Markup Editors!
- How to show source code in wordpress comments?
- Quick & Easy Form Validation Tutorial with JQuery
- Changing Default Font in TinyMCE Editor
- Best Free Web based WYSIWYG html editors
- Free HTML Markup Editor
- Fix -> WordPress wp-comments-post.php is blank !
October 24, 2010
This is a very informative post about wordpress. I surely love seeing and discovering something new about it. Just subscribed and looking forward to read some more articles of yours. Good luck and I hope we can connect in one of these days.
October 26, 2010
I am following with interest. Do you make a very special shares.
November 1, 2010
Thank you. Good site you have here. Got some more links to link to which have a bit more information?
November 1, 2010
Thank you. Great article you have here. Got some extra websites to direct to with a bit more info?
November 4, 2010
In the end, an issue that I am passionate just about. I enclose looked for information of this caliber for the last lots of hours. Your site is greatly appreciated.
November 6, 2010
please how can i put that code?
November 23, 2010
Thank you for your useful post
a lot …
November 30, 2010
What a wonderful theme you have
your web site articles are quite informative too! Many thanks 
December 2, 2010
You’ve wrote a very well-written blog post.
If it’s ok with you, I would like to ask permission to use your article as it relates to my obstruction. I will be glad to negotiate to pay you or hire you for this.
With Regards from
Republic Polytechnic
December 2, 2010
Content is evaluated first of all based on the message contained. When the target audience doesn’t find their needs explained, that article proved its market .
December 8, 2010
thanks for teaching us to add the code.
we’re really seeking this code for our airless paint sprayers web site
Airless paint sprayers
December 11, 2010
Awesome post, I am looking forward to your next one. Where did you get your theme, I am sick of these stupid free ones lol
December 12, 2010
great post as usual . Thanks.
Regards
Al Khafji
December 12, 2010
Thank you guys! I was totally surprised that i have received that many comments for this article i wrote. Didnt think it would be so popular!
February 3, 2011
But it was really useful
January 8, 2011
Great read. I found your website on bing and i have your page bookmarked on my favorite read list!
I’m a fan of your blog. Keep up the good work
January 14, 2011
Hi there, You’ve done a great job. I’ll definitely digg it and personally suggest to my friends. I’m confident they will be benefited from this website.
January 31, 2011
awesome post. I have always dreamt cars. keep it up
February 5, 2011
Hi thanks i’ll give this a try, Its good to have some knowledge of html code, will come in good use.
February 21, 2011
Hi thanks i’ll give this a try,
April 19, 2011
Wonderfull blog! It definitely is wonderful and grabbed my interest. I will in fact put this on my blog roll listing. Many Thanks for your help.
April 28, 2011
Very impressive article. I just came across your site and wanted to say that really enjoyed reading your blog posts. I’m not in any way and I hope to post soon.
May 4, 2011
I truly like your internet site
May 22, 2011
Gracias .. Excelente !!!
This is very nice and gave me exactly what I wanted for my site.
June 21, 2011
Nice point’s altogether, personally I’m going to have to bookmark this and come back to it. I love this content and I dream to find out more.
June 22, 2011
Yet, all signs point to the cost of the device being just right – Nintendo does not sell their hardware at a loss like the competition. So, perhaps you have devalued the cost of components because you’re too used to paying hidden costs such as subsidized cell phone plans?
June 23, 2011
What is the best free software to automatically backup wordpress database and files?
June 27, 2011
Thanks you a lot !
It is very useful !
August 12, 2011
Thank you for the coding and the well laid out instructions. This is an extremely beneficial tutorial that I have saved in my bookmarks – really appreciate it.how to make a Tesla coil
September 15, 2011
trying to find you, you got facebook?
September 15, 2011
see my email on contact page
November 4, 2011
Very enlightening thank you, I presume your audience would likely want a good deal more content such as this keep up the great content.
January 23, 2012
I really loved this kind of post, if I have your permission may i duplicate this post to my blog and share it with other people as well. Naturally I’m going to give the original credits to you only.
April 11, 2012
1) No need remove
This function supports args. http://codex.wordpress.org/Function_Reference/comment_form
We can redefine there ‘comment_field’ only, and it would be more correct code.
2) For support bbcodes this plugin looks more powerful http://wordpress.org/extend/plugins/bbpress-bbcode/
3) It seems to me it’s possible make switch between HTML and BB-codes.
4) Using one file for icons is little bit better.
April 11, 2012
Please fix my point 1 in previous message.
It should be:
1) No need remove
—
Here is redefined comment_field for comment form:
<?php comment_form( array( 'comment_field' => '<p class="comment-form-comment"><label for="comment">'._x( 'Comment', 'noun' ).'</label> <script type="text/javascript" src="'.get_bloginfo('template_directory').'/bbeditor/ed.js"></script> <link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/bbeditor/styles.css" /> <script>edToolbar(\'comment\');</script> <textarea id="comment" name="comment" cols="45" rows="12" aria-required="true"></textarea></p>', ) ); ?>Just tested, all works correctly
Last question.
)
Why you didn’t implement this on corpocrat.com ???