Word-like HTML inline edit with design mode

Word-like HTML inline edit with design mode(til.secretgeek.net)

19 points by knlam 1 year ago | 10 comments

treflop 1 year ago |

This (and the contenteditable attribute) were added in Internet Explorer 5.5 to let you create WYSIWYG editors and it was later reverse engineered and replicated in other browsers.

It is still the basis for a lot of WYSIWYG editors, but it's not perfect and sometimes provides too little control (produces messy HTML), so sometimes people avoid it and build a WYSIWYG editor from scratch using something like <canvas> (e.g. Google Docs) but this is way more effort.

Some of the O.G. WYSIWYG editors (e.g. CKEditor) still use "contenteditable" but patch over all the problems with it.

notpushkin 1 year ago | |

I love how Trix [0] and (I think) ProseMirror [1] work in that regard: it does use contenteditable, but every edit you make is applied to an internal model instead, then the editor state is updated back from the model.

[0]: https://trix-editor.org/

[1]: https://prosemirror.net/

Edit: also Quill! I think it’s pretty much the goto strategy for WYSIWYG editors nowadays: https://v1.quilljs.com/guides/comparison-with-other-rich-tex...

kibibu 1 year ago | | |

Lexical does the same.

matthberg 1 year ago |

MDN says `document.designMode = "on"` is supported in all browsers, not just chrome dev tools. Looks like it's a rather ancient feature—in Firefox since 1.0, same with Chrome.

https://developer.mozilla.org/en-US/docs/Web/API/Document/de...

tgv 1 year ago |

Why add 'designMode'? AFAIK, setting 'contenteditable' suffices, and you can use it with more precision.

bkyan 1 year ago |

How do you save your changes with this?

ricardo81 1 year ago | |

You could potentially use document.querySelector('html').outerHTML and POST it somewhere

kibibu 1 year ago | | |

And listen for changes with a MutationObserver

bkyan 1 year ago | | |

Thanks!