How to use the contenteditable attribute in Vue 3

#javascript #typescript #vue #html

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>

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)

Thomas Hansen • Jul 11 '22

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

Aurélien Delogu • Jul 11 '22

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 ?