Add Micro Inline WYSIWYG editor to Comment Box to increase interaction

There are many times a normal user wants to add link or image or wants to express better but he or she is not able to see because Most of the blog comment section are pretty much less interactive and they don’t get except a flat comment box where he or she can just type.

Now considering normal users who don’t have any idea of HTML or tags want to add an image, but he can do nothing except leaving a link . Why not give them more options which can allow them to interact with comment box like they do in a word document , by adding a small editor with some basic stuff.

Keep reading there is a small goodie for you at the end

NiceEdit is an online project which is working to make all TextArea like comment box more interactive by adding a Micro Inline WYSIWYG editor. Its a JavaScript that you can add to your page and connect it with your comment box. And yes its free and not at all heavy to the servers

Small file size <35KB Total, <10KB Compressed! Only 2 files (js + icons) required for operation.
Flexible Configuration replace textareas or divs Multiple editors can optionally use single controls Save content via AJAX or HTTP Post and works with IE 5.5+ / FF 2+ / Opera 9+ / Safari 3+

And This is what It does to a comment box in WordPress blog.

Don’t you think that’s a lot better. Making work of a commentator very easy and they feel like doing it.!!

Integrating with your WordPress blog.

1. Add the script to your header. Get the script from the home page. of the project.
2. You are done. Confirm by opening any post or page where comments are enabled.

How it works?

It looks for a “textarea” on any page and loads the editor controls on it and best is it fits to the size.

Some work for you ? Find how I have integrated

1. Now if you take a look at my comment box, I have done something different. The editor comes only on my comment box and not any other pages like Contacts.
2. I have more controls than what normal script will give you.

Find out how and the first person to come with the right answer will get a link back from my blog for a week.!

 

About The Author of this article: Ashish is one of the co-author of this blog and writes on various interesting softwares, PC tips and more. You can read more of his articles here.

Offer of the month Get a free page for yourself

Readers Play Ground

• Add your Comments or Discuss further in our forums

• Enjoyed this article? Subscribe to the Full RSS Feed

• Click to save on your favorite Social Bookmark Site del.icio.us Digg it Furl Netvouz Spurl Yahoo MyWeb Google DZone StumbleUpon
• (1 votes, average: 5 out of 5)
  
   Loading ...
• Email This Post to your friends or somebody who can use it
• Tags: comment-pictures, commentators, comment_management, inline editor, inline wysiwyg editor
  
• Get Post like this in your Inbox Click to get via Email ( You will have to confirm by checking you Inbox)
• Read More Stories from Workshop

11 Comments and Link-Backs to “Add Micro Inline WYSIWYG editor to Comment Box to increase interaction”

11 Comments from Friends and Readers

• Techblissonline Dot Com, January 3, 2008:

  nice JS work buddy…this does the trick:new nicEditor({fullPanel : true}).panelInstance(’comment’);you are creating an instance of niceEditor and calling panelInstance only for the textarea with name “comment”…you have also turned on the fullpanel… but emoticons does not seem to work…

• Techblissonline Dot Com, January 3, 2008:

  also line breaks does not work…everything gets cluttered…look at my answer above…

• Ashish Mohta, January 3, 2008:

  @Technical Bliss: I had to come to my site to test it. I saw other comments coming fine so will have to see. Now I will give a line break

  Ok this is the paragraph after a line break.

  Another one. Now I will be submitting. Do you use IE?

• Techblissonline Dot Com, January 3, 2008:

  No Ashish…I use firefox…oh should the line break be given explicitly…test…

• Ashish Mohta, January 3, 2008:

  @Techblissonline: Now sure why its not working for you. I did got many comments where line breaks worked fine inlcuiding mine. I use FF 2.

  No Probs. You have won the link back for a week from my site. I will be emailing you.

• Techblissonline Dot Com, January 3, 2008:

  oh should the line break be given explicitly…using that HTML….cheers,Rajesh

• Ashish Mohta, January 3, 2008:

  @Rajesh: No You need to hit Enter. Thats it.

• sunzhuo, January 13, 2008:

  Hello Asish. I’m really feeling lucky finding your post match my search. Well, but I still have no idea how to show this comment box. I’ve tried inserting the nicedit script, but nothing happened.

  So.. I wonder if you can help me solve this.. I’d appreciated any reply anytime you got spare.

• Ashish Mohta, January 13, 2008:

  @Sunzu.: Open the source page of this post and You will find a script in the header. Copy that exactly in your header part of blog.

  Next thing is you will need to find the ID of the textbox ( which will be textarea in html ).

  In My blog its termed as Comment so in the script I have written as comment. You will need to change accordingly

  HTH

• sunzhuo, January 14, 2008:

  Hi again Asish. First thing first, thanks for replying.

  There are so many possible scripts. So, just confirming..

  Is that what you mean?

  I’m using blogger and I get a trouble finding this textbox / comment form.. You know.. blogger doesn’t provide inline comment box. So.. Still have no idea how to connect the comment box with the wyswhyg script. Any suggestion please?

• Ashish Mohta, January 14, 2008:

  @Sunzhuo: Tough question, Almost forgot blogger comment section is different from Wordpress. I will have to find more on this. will get back to you soon