How do text editors work and how are you going to build a basic one?

Question

It seemed to me that I was very familiar with JavaScript, but then I thought about how text editors, such as CKeditor, work, and realized that I had no idea.

I assume that the buttons are somehow connected via JavaScript to the text area, but how it is marked.

Is there anything special about rich text editors on the web, or is it just a lot of fancy js?

Answer 1

A lot of fancy.js and what used to be an MS extension for the DOM called contentEditable, which basically turns any dom element into a simple text editor. JS allows you to do things like bold / italic / font / insert other DOM elements (tables, images, etc.). but in the end it comes down to contentEditable.

Answer 2

check this out:

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

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

Answer 3

You can do this with the contentEditable propertiy div element. Say you have a bold button. The user clicks on it, then you call the js function and open the tag, for example, <b> , when the user clicks on a regular button, you close it. Same thing with color. Open <span style="backround-color:red"> .. You basically create div text with js .. Try jquery for easy house manipulation.