Caution: For purposes of demonstration, this sample renders user input from a TEXTAREA element as HTML in another DIV element. If you employ the contentEditable property in your own application to display text as HTML, take precautions against trusting user input. Inappropriate handling of user input can compromise the security of your application.
This HTML editor is a DIV element set to be content editable. Any valid HTML content (text, images, form controls, etc.) can be pasted and edited in this editor.
This text editor is a TEXTAREA element and is content editable by default. Only text can be edited in this tool. However, you can draft HTML in TEXTEditor and press the Append to HTMLEditor button to see the result appended to HTMLEditor. The Append to TextEditor button reverses this process by appending the HTMLEditor's HTML as text to TEXTEditor.
Both editors use the same function to activate or deactivate editing. The function uses the isContentEditable property to test whether editing is active. Accordingly, the contentEditable property is then reversed to reset editing.