DEV Community

Cover image for Website Editor โœ
Suprabha
Suprabha

Posted on

Website Editor โœ

There are 2 basic ways of making an editor ๐Ÿ“

  1. contentEditable property
  2. 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'
Enter fullscreen mode Exit fullscreen mode

The same result can be triggered by enabling contentEditable on the body element, like this:

document.body.contentEditable = true
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

Reference ๐Ÿง

๐ŸŒŸ Twitter ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Suprabha.me ๐ŸŒŸ Instagram

Top comments (4)

Collapse
 
learnwithshakib profile image
Md shakib ahmed • Edited

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!๐Ÿ’–

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

This is awesome ๐Ÿ‘, thanks Suprabha for sharing your knowledge with us ๐Ÿ’

Collapse
 
andrewbaisden profile image
Andrew Baisden

Oh very cool I had no idea you could do this.

Collapse
 
fasani profile image
Michael Fasani

I never knew, how crazy.