Nerd For Tech
Published in

Nerd For Tech

Make any element text changeable with contenteditable

I found the contenteditable attribute a while back when I was trying to find a way to build a WYSIWYG.

Simply put, adding the contenteditable attribute to any HTML element allows you to edit the content of that element. Within the limits of what the browser and the element support. Editing a button, for example, is buggy at best.

By doing this, you can allow advanced editing features, context menus and more where a simple input element will only allow you to style or interact with the entire text content as one element.

I came across this whilst trying out TipTap which is a modern WYSIWYG editor. I wanted to be able to inline edit <ruby> tags for my Japanese app.

With the contenteditable attribute, I did not even need to use TipTap, just plain old HTML did the trick.

The other day, I wanted to generate some quick prompts for a video I made, and I resorted to this attribute again.

Animated gif of editing html text in a browser
Editing styled text with contenteditable

You can find the complete (tiny) source code on GitHub or try it here.

Any other tips on what you can use this for? Have you ever used it? Let me know in the comments.

Thank you for reading.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Dikman

David Dikman

89 Followers

Full-stack developer and founder. Writing here and at https://greycastle.se. Currently open for contract work.