Question

I want to know the basic principle used for WYSIWYG pages on the web. I started coding it and made it using a text area, but very soon I realized that I cannot add or show images or any HTML in the text area. So I made it using DIV, but I did not understand how I could make it editable.

So, in gist, I want to know how(in principle) to make an editable DIV section on a web page, something similar to Google docs or FCKEditor or TinyMCE.

I would be very grateful for any pointers and info.

Thanks!

Answer 1

There’s the contentEditable flag that can be added to any element on a page to make it editable, eg.

<div contentEditable>I am editable!!!!</div> 

Should work in all major browsers nowadays, and things like shortcuts keys (cmd/ctrl-b, etc) will Just Work.

Form submission can then be done by pulling innerHTML out of the editable region.