DEV Community

Cover image for How to use the contenteditable attribute in Vue 3
Aurélien Delogu
Aurélien Delogu

Posted on

How to use the contenteditable attribute in Vue 3

Since I'm unemployed, I'm working on a side project in Vue 3 / TypeScript, so I keep myself up-to-date in frontend development.

Lastly, even if I've 15 years of full-stack experience, I encountered the contenteditable HTML attribute that I didn't know anything about (man there's so much to know in HTML/CSS today).

For those who don't know about it neither, it's an attribute that makes the target tag editable by a simple click: everything is handled natively by the browser itself!

In my application, I had a title that I needed to make editable and I implemented the behaviour by replacing the title by an input when it was clicked. Then I put a v-model attribute on it, and hid the input when the enter button is pressed (and then displayed the title again in place). I already thought when I coded this that it was a bit cumbersome... So I was really intrigued when I met this contenteditable UFO (well, it's not flying per say, but you understood).

I managed to quickly update my code and tested how the thingy worked.

<script setup lang="ts">
  import { ref } from 'vue'

  const title = ref('My title')
  const titleElement = ref(null)

  function validate(event : Event) {
    ( as HTMLInputElement).blur()
    title.value = titleElement.value.innerText.trim()

  defineExpose({ titleElement })

  <div ref="titleElement" contenteditable spellcheck="false" @keydown.enter="validate">
    {{ title }}
Enter fullscreen mode Exit fullscreen mode

Well... It seems that is all we need 😅🦄

It's clearly better now without the complexity of dealing the edition by ourselves!

Here's the playable snippet if you want to have fun with it!

If you have any questions, don't hesitate to ask them in the comment section 😉

Photo by Thought Catalog on Unsplash

Top comments (6)

polterguy profile image
Thomas Hansen

I wish somebody would invent something amazingly cool to fix "the WYSIWYG problem" ... :/

So far, all editors I've seen down this alley are mediocre (at best), Markdown is too complex (for non-devs), and all other initiatives I've seen are "sub optimal" at best ...

As far as I'm concerned, this is an unsolved problem ...

... I guess devs were too busy learning how to use Kafka ...!! :D

pyrsmk profile image
Aurélien Delogu

Indeed... Content editing is probably the worst thing in frontend dev ^^ Each time we need to edit the design, define how input behaves, etc... We could also use CSS frameworks but they have their learning curve and they tend to make designs generic.

As for the "WISIWYG" editors, I didn't have the chance to really analyse the domain, but it seemed to me there were good editors. Like TinyCMS. What are the issues with them ?

polterguy profile image
Thomas Hansen

Difficult to integrate with stuff such as images, (internal) links, etc ...

polterguy profile image
Thomas Hansen

Thx, bookmarked :)

chonchah profile image
chonchah • Edited

Thanks! I found this article and is very usefull for me but I think that @keyup is the best solucion for this issue.

pyrsmk profile image
Aurélien Delogu

Why @keyup? It feels a bit weird to me to have the text editable after the key is released.