Have you ever wondered how hard it would be to recreate a text editor like the one we use right here on Medium?
If you haven’t seen Medium’s text editor, I would highly recommend checking it out. You are able to write, edit, and style your content (within Medium’s provided styles) right here in your browser.
No tech knowledge is needed. No html tags appear in the text.
Take a look:
Hopefully that example demonstrated a few things for you:
document.designModefor the entire document, and
element.contentEditablefor just one element.
document.execCommandis simply for demonstration purposes and error handling.
event.preventDefault();if you trigger the command from a button click. Otherwise the focus will shift to the button and the command will fail.
If nothing is selected, the command will fail (sometimes).
If it serves your purposes better, you can also create editable content with HTML.
This text can be edited!
This could work nicely with frameworks like React, Angular, etc. Where you could use a component’s state to control if the content is editable.
Either way you need to:
Below you will find the same example above, but this time when you change the text there will be some information logged to the console. I am using the
MutationObserver API to watch for these changes.
So what did I do?
Hi, I’m Justin Fuller. I’m so glad you read my post! I need to let you know that everything I’ve written here is my own opinion and is not intended to represent my employer in any way. All code samples are my own, and are completely unrelated to Bank Of America’s code.
Create your free account to unlock your custom reading experience.