Did you know HTML elements can be editable?
C
I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Command Palette
Search for a command to run...
Comments (2)
Join the discussionA
Alyssa Holland5y ago
That’s cool that you showcased this often forgotten attribute. I’m actually quite familiar with contentenditable as I worked on a project that utilized it to create a transcript editor. When you couple it with Javascript, it’s actually pretty powerful.
1
C
Chris Bongers5y ago
Oh nice to hear someone actually using it! So you used it as actual "input" to save values?
A
Alyssa Holland5y ago
Yea that’s the general gist. We used contenteditable to allow them to make revisions and extract the content with textContent. Behind the scenes we do a bunch of validation and all that good stuff. The final product ended up being fairly robust. But I am biased since I worked on it 😆
1
C
Chris Bongers5y ago
Alyssa Holland Sounds cool! Awesome work Alyssa, thanks for noting this, it's good that people see use-cases of this element
1
D
Daniel Martorell5y ago
Hi! Interesting article.
Sorry for my lack of knowledge but could you give me some examples in which this feature can be useful?
Thanks for sharing!
1
C
Chris Bongers5y ago
I personally wouldn't recommend this option for many adventures, BUT it can be useful to make something like a visual character tester!
So imagine you have an email or website and content creators are able to write content, you tell them, keep lines at 250 chars. It would be cooler if they can just see how it would actually look right. In this case contenteditable is a good option.
If they actually need a wysywg editor not, if they need to save the data, not.
It's a thin line, but there are some good use-cases for it.
1
More from this blog
I wrote 1000 articles, what’s next?
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...
Dec 22, 20223 min read
Vendure community and more
It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...
Dec 21, 20222 min read
Deploying Vendure
The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...
Dec 20, 20223 min read
Vendure - Overwriting email templates
The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...
Dec 19, 20222 min read
Customizing vendure
Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...
Dec 18, 20224 min read
