Question

I am wanting to create fancy “text-areas” like typeit.org has. I’m pretty sure they use iFrames with the iFrame doument’s contentEditable value set to true, but how might the symbol buttons work? When using this technique, how do you replace the current selection inside the iFrame with a symbol or if nothing is selected, insert the symbol to the left of the cursor?
http://currencies.typeit.org/

Answer 1

When using an iFrame as a Rich Text Editor, you can tell the iFrame to enable design mode and execute commands.

To enable design mode (allowing the user to edit the iframe), you can use this snippet:

document.getElementById("myiframe").document.designMode="on";

Then to execute a command when the user clicks a button, you simply use this code snippet:

var textEditor = document.getElementById("myiframe");
textEditor.document.execCommand(x,"",y);
textEditor.focus();

Where x is the command and y is the value. For more information on available commands, look at MSDN. I believe OverWrite provides the functionality that you see in TypeIt; but I could be wrong, I’ll look into it and update my answer.

EDIT: As @TimDown suggested: IE does not support insertHTML, so in order to do the equivalent in IE, use textEditor.document.selection.createRange().pasteHTML("some HTML").