Website Editor ✏
There are 2 basic ways of making an editor 📝
- contentEditable property
- designMode property
Both of the properties enabled editing the content on the page as if it was an editor. So open your dev console of the browser and type document.designMode="on" this will convert your webpage document into a rich text editor. The best part is the
contentEditable vs designMode 📓
When you set a page into
designMode, you can edit the content of the page directly inside the browser page, which is very handy to test some prototype or check out how a new headline would look, for example.
How to enable designMode and contentEditable ❓🤔
document.designMode = 'on'
The same result can be triggered by enabling contentEditable on the body element, like this:
document.body.contentEditable = true
You can edit or delete the content and also drag images around to reposition them.
You can turn off the
designMode by using
document.designMode = 'off'