I am trying to develop an Online editor (like FCKEditor/etc) but I have no idea how they work. I know that the WYSIWYG ones have Javascript and IFrames, but how do they actually work?
I'm especially curious about having a real-time preview of what's being typed into the editor.
RTE are usually (always?) implemented using an iframe. The document object which is available inside that iframe must have the property designMode set to on. After this point all you have to do in order to implement basic functionality like bold, italic, color, background, etc. are done using the execCommand method of the document object.
The main reason for using an iframe is that you won't lose focus of the selection when clicking styling buttons (Firefox allows setting this property only on iframes). Further more, the contentEditable attribute is not available in Firefox versions previous to 3.
Things get a little more complicated when you want to do fancy things with that RTE. At that point you must use Range objects (which are implemented differently in the various browsers).