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 JavaScript on the page will still be executed.
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'
Reference 🧐
| 👩🏻💻 Suprabha.me |
Top comments (4)
It's great that you shared this with us @suprabhasupi. Thanks a million! This post has everything I am looking for in one place! I am so excited! When developer's looking a great Website editor? Hope need to Use that! Here i found more one you can try! Ezytor is a simple website editor that gives you all the components to create and manage your web projects. You can easily create stunning websites with Ezytor’s drag-and-drop functionality, templates, widgets and much more.
Happy to learn something special!💖
This is awesome 👏, thanks Suprabha for sharing your knowledge with us 💐
Oh very cool I had no idea you could do this.
I never knew, how crazy.