CODEWITHSUNDEEP
javascriptcontent-management-systemrichtextboxckeditorrtf
CafeHey
CafeHey

Reputation: 5800

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

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?

Upvotes: 4

Views: 821

Answers (3)

Fatih Donmez
Fatih Donmez

Reputation: 4347

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.

Upvotes: 2

Vlad Balmos
Vlad Balmos

Reputation: 3412

checkout this:

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

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

Upvotes: 2

Marc B
Marc B

Reputation: 360702

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.

Upvotes: 3

Related Questions