Thursday, September 3, 2009

Simple Html Editor

Simple HTML Editor

I have faced a new problem. client want WYSIWYG editor. there are lot of free HTML editor
available and I can use those very easily, but he don't want those , he want custom simple
HTML editor. so I have create the simple HTML editor. the entire code is listed below:


1) download latest jquery from it's site.

2) create a div

<div contenteditable="true" style="width:600px; height:150px; overflow:scroll; background-color:#CCC" id='my_text'></div>

3) create a textarea
<textarea name="my_text1" id="my_text1" style="display:none;"></textarea>

4) create a submit button.

5) and on click on submit button use this javascript code:
   var my_text=jQuery.trim($("#my_text").html());
   $("#my_text1").val(my_text);

6) and finally submit the form.

in server side code , I have used JSP here:

7) String my_text=request.getParameter("my_text").trim();