How to use `execCommand("insertorderedlist")`?

Question

I see some wysiwyg editor uses execCommand to insert DOM to div, such as: execCommand("insertorderedlist").

I tried to write a demo, but it can't run. The code is simple:

document.execCommand("insertorderedlist");

But when I click "Run JS" button, it doesn't insert anything. Do I miss anything ?

Here is a live demo: http://jsbin.com/olalaf/1/edit

Answer 1

Here's your demo fixed by me: http://jsbin.com/olalaf/2/edit

You need an element with contenteditable attribute set to true. This attribute enables editing inside this element. All browsers support it, but in a very poor, buggy way.

Second part is executing document.execCommand in a proper way so the selection isn't lost. That's why I added my own button. I think that Run with JS doesn't work because it's in a different frame, so that the selection is lost before command is executed.