HTML Javascript Rich Text Box (IDE)

I am hoping to build an IDE in javascript that behaves much like gmail except the style will cha开发者_JAVA技巧nge automatically based on what they type as they type. The logic for this isnt where im struggling. Its how gmail achieves the ability to edit in a rich edit format in html. As far as I know the textarea control does not work this way, so how do they fake this functionality?

Google for "content editable" Try to press F7 in Firefox end edit HTML page directly :) Gmail uses Frame inside a page with contenteditable="true".

See also Google Web Toolkit: http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery There is RichTextArea widget.

I'm not quite sure whether this is what you mean, but are you looking for a online WYSIWYG editor?

In that case allow me to recommend CKEDitor, it is quite fast, modern and robust.

You can find a broader list in the corresponding Wikipedia entry.

You would probably have to customize any of the editors to be able to edit E-Mails (You wouldn't be able to work with any pre-defined CSS classes for example, so the editor would have to do all the style definitions directly in the tag) but it shouldn't be a problem.

Download one of the many open source system that allow that, and see how they did it.
Basically, they are attaching event handlers to button which in turn know how to insert "stuff" in the place the cursor is currently located in the text area, OR around the selected area in the textarea.

My vote is for 'editarea' which is in the list of web based editors: Another Wikipedia entry.

I was able to add it into an existing page with the most simplistic of code:

<script language="javascript" type="text/javascript" src="edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript" >
editAreaLoader.init({
  id: "my_textarea_id"   // ID of textarea to turn into syntax editor.
  , syntax: "php"
  , start_highlight: true
  , allow_resize: "both"
  , toolbar: "search, go_to_line, |, undo, redo, |, highlight, reset_highlight, word_wrap,|,syntax_selection"
  , min_height:150
  , min_width:400
});
</script>