[JS] Rich Text Editors. Whats the basic principle?

Hi,
just for interest: whats the basic principle of Rich Text Editors like CKEditor, TinyMCE, etc?
I assume you build a iframe and bind eventhandlers for onkeydown and onkeyup to them.
But then, how is the cursor realised? Range selection? And, and, and...

Does somebody know?
Thanks cb

Have you considered just looking at the source code for one? They're generally just glorified textareas./

Yes, i searched for the smallest one i could find (punymce), but the source code is very hard to read. There are very few comments and the variables names are usually just one letter. It would be much easier to understand, if someone who knows how it's working, would list the basic steps.

Here you see that it's more than just a pimped up textarea. They build up a dom representation and bind events to the iframe. But i really wonder how the cursor is realised and how navigation within the text is done (e.g. arrow key). And of course the selection of ranges.

Well, all the examples on the site start with a textarea. So look at one that's coded more clearly, rather than focusing on the "smallest" one?

David,
you are a real nice guy, but why do feel challenged to answer to this thread at any price?

Sorry, but i'm looking for someone who knows how it works and is willing to share his knowledge in a short summary.
And if there's nobody here i wouldn't be disappointed.

cb

So basically you want a walkthrough of 1500 lines of JavaScript code? I mean, I'm not really sure what you're looking for. It's a text area--that's how selections are handled. It binds keys, that's how keystrokes are handled. It has some buttons that work on selections, they're just buttons.

Ok,
so you are typing into a hidden textarea but what you see is html in an iframe right?
The cursor and the selection range still remain a mystery for me.

Thanks cb

If you know jQuery, maybe start here instead:

http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js

It's only ~300 lines, and having jQuery abstract some of the nuts and bolts might give you a better starting point.

Getting selected text is a normal window function, IIRC.

Cool thanks!
so iframe.contentWindow.document.selection resp. iframe.contentWindow.getSelection() seem to be the key to selection.
I didn't know that it exists in JS. I've got to experiment with that.
Could be that i come back for the cursor

but in the meanwhile: thanks again!
cb

No sweat; feel free to follow up with specific questions, or if you discover something cool :)

I think now i've got it

The cursor is a selection with nothing selected. Hehe.