How to make text box editable like of Google docs presentation workspace?

Question

I am working on on a new project which is to make a presentation maker like of Google docs presentation maker. I was unable to find a way to make the text box selectable and editable like of Google docs presentation workspace:

Like the one above. Any help regarding this would be greatly appreciated.

Answer 1

You could use the contentEditable attribute for dom elements.
Here's a live demo (built using jquery) that's using it : http://jsfiddle.net/Z9tVM/;

UPDATE :

Here's a demo without using any frameworks (just plain js) : http://jsfiddle.net/Z9tVM/2/