Create your own HTML Textfield with Javascript

I came across the following http://ckeditor.com/demo , and was wondering if anyone had a basic tutorial how to implement this (or perhaps w开发者_如何学Pythonhat key search terms I should use)?

Is this just a heavily modified TextField, or have they somehow managed to create a completely new TextField from scratch?

I tried googling this many times, and I always get pages relating to customizing the built-in TextField with CSS etc.

---

A good place to start if you want to learn how richtext web editors work is to look into the contenteditable attribute and the document.execCommand method (the best editors use a lot more than this, but these are at the foundation). Over-simplified, an editor consists of a contenteditable block and ways to invoke document.execCommand on the text selection.

But, speaking as a person who has actually developed an editor of this kind, you might be better off using an existing one (CKEditor being a great one, in my opinion).

Edit: Note that contenteditable is a proprietary (Microsoft) property, but most (all?) browsers have implemented it now, and it will be in HTML5.

Edit 2: I want to try to clear up a few misconceptions.

• A div or iframe isn't in itself editable, it requires the contenteditable attribute. The use of an iframe is typically a workaround for the fact that older Gecko browsers only supported an alternative editable property (designMode) that could only be applied to a whole document.

• While some operations of advanced editors probably do employ innerHtml, this isn't the key to making an editor on the web.

---

It is not a textbox. It is a DIV that has lots of HTML injected to it with javascript.

The basic idea is that JavaScript uses the innerHtml property of the div and writes HTML to it.

---

This is a javascript implementation that replaces a input. It basically hides the input and uses it for storing and passing the data via POST.

---

The advanced textfields I have seen have all been iframe or div. The code behind them is quiet messy and not very accessible.

Proceed with caution!

---

You may want to consider WYSIWYM instead of WYSIWYG.