How do rich text editors work and how would you go about build a basic one?

Question

I thought I knew JavaScript pretty well, but then I thought about how rich text editors work, such as CKeditor, and realized I had no idea.

I assume the buttons are somehow hooked up via JavaScript to a text area, but how is it marked up.

Is there something special about rich text editors on the web, or is it just lots of fancy js?

score 3 · Answer 1 · answered Nov 01 '11 at 19:36

Lots of fancy.js, and what used to be an MS extension to the DOM called "contentEditable", which basically turns any dom element into a simple text editor. The JS is there to allow doing things like bold/italics/fonts/inserting other DOM elements (tables, images, etc...). but it all comes down to contentEditable in the end.

score 2 · Answer 2 · answered Nov 01 '11 at 19:36

2

checkout this:

http://www-archive.mozilla.org/editor/midasdemo/

and this: https://developer.mozilla.org/en/rich-text_editing_in_mozilla

answered Nov 01 '11 at 19:36

Vlad Balmos

3,372
19
34

score 2 · Answer 3 · answered Nov 01 '11 at 19:44

You can do it with contentEditable propertiy of div element.. Let say you have bold button. User click it, then you call a js function and open a tag like <b> when user click normal button you close it .. Same it with color.. Open a <span style="backround-color:red"> .. It's basically you style div text with js.. Try jquery for easy dom manipulation.

How do rich text editors work and how would you go about build a basic one?

3 Answers3