The difference between contenteditable vs. designMode is that the latter turns the whole whole page or document into an editor, while contenteditable

contenteditable vs designMode - What is the difference?

submited by

Style Pass

2021-09-25 21:00:07

The difference between contenteditable vs. designMode is that the latter turns the whole whole page or document into an editor, while contenteditable works only per element.

So you've found yourself either looking up how to create a WYSIWYG editor or by plain luck because you just learned about designMode or contenteditable - either way, I will be explaining how they both work and when to use them.

Be aware, contenteditable is not a fun attribute to use. It seems easy to work with and does what you'd expect, but you will be in for a big surprise.

I've created a WYSIWYG editor for Answerly using contenteditable. I wrote about my experience, which you can read by clicking here.

You can use contenteditable when you want to create a WYSIWYG (what you see is what you get) editor. Putting the contenteditable attribute to an element suddenly makes the content of that element editable and exposes text styling through shortcuts and code.

As the word suggests, design mode is for design - its main use-case is to edit the page on the go without using the code editor and re-build your web page every time. However, you should know that you can't save the changes that you make with designMode. They're simply for preview.