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 ๐ง
๐ Twitter | ๐ฉ๐ปโ๐ป Suprabha.me | ๐ Instagram |
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.