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.