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) {
    (event.target as HTMLInputElement).blur()
    title.value = titleElement.value.innerText.trim()
  }

  defineExpose({ titleElement })
</script>

<template>
  <div ref="titleElement" contenteditable spellcheck="false" @keydown.enter="validate">
    {{ title }}
  </div>
</template>
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 (5)

Collapse
 
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

Collapse
 
lukeshiru profile image
Luke Shiru

Maybe Lexical is what you're looking for? It was released kinda recently.

Collapse
 
polterguy profile image
Thomas Hansen

Thx, bookmarked :)

Collapse
 
pyrsmk profile image
Aurélien Delogu Author

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 ?

Collapse
 
polterguy profile image
Thomas Hansen

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

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs