Vue-contenteditable NPM

vue-contenteditable

This plugin provides a <contenteditable/> element supporting v-model. It also provides some (optional) features, like preventing html input and paste, or new lines.

It is inpired by the nice (but limited by design) https://github.com/asconwe/vue-contenteditable-directive .

Contrary to vue-contenteditable-directive, this plugin has full support of v-model reactivity.

npm package : https://www.npmjs.com/package/vue-contenteditable

github repository : https://github.com/hl037/vue-contenteditable

Should you use a content editable ?

The response is generally "no".

But... there are edge cases where neither <input/> nor <textarea> could suit, for example when you need a dynamic object size to adapt to the user input text's size.

Installation

NOTE : Versions 3.0.0+ are only compatible with VueJS v3+. For VueJS v2, please install the version 1.0.2.

With a build system

I recommand using pnpm + vite for any vue project. When using another package manager, you could encounter problems due to several Vue instances (errors like "Missing ref owner context"). Nevertheless, this package should work with any package manager.

    pnpm add vue-contenteditable

    yarn add vue-contenteditable

    npm install --save vue-contenteditable

(Re)build

The needed files are already provided in dist/, but if you want to re-build, simply run :

Install the dependencies :

pnpm i

Build and typescript declarations:

pnpm build

Directely in html

 <script src="contenteditable.umd.js"></script>

Global registration

This is optionnal, and I would not do it myself, but you can register the contenteditable component globally so that you don't need to import it:

In your main.js :

import contenteditable from 'vue-contenteditable'
Vue.use(contenteditable)

Usage

For advance usages, please refer to the samples provided in the git repository. There are examples writen in js and ts, one using vue-cli, two using vite.

SFC Composition style

<template>
  <contenteditable tag="div" :contenteditable="isEditable" v-model="message" :no-nl="true" :no-html="true" @returned="enterPressed" />
</template>
 
<script setup>
import { defineProps, ref, computed, onMounted, watch } from 'vue';
import contenteditable from 'vue-contenteditable'; // Not needed it registered globally

const isEditable = ref(true);
const message = ref("hello")

function enterPressed(){
  alert('Enter Pressed');
}
</script>

Option style

<template>
  <contenteditable tag="div" :contenteditable="isEditable" v-model="message" :no-nl="true" :no-html="true" @returned="enterPressed" />
</template>
 
<script>
import contenteditable from 'vue-contenteditable'; // Not needed it registered globally
export default {
  components : {
    contenteditable
  }, // Not needed it registered globally
  data() {
    return {
      isEditable: true,
      message: "hello"
    }
  },
  methods : {
    enterPressed(){
      alert('Enter Pressed');
    }
  }
}
</script>

Props

Prop name	Type	Default	Description
`tag`	`String`	`"div"`	Html element type (`p`, `div`...)
`v-model`	`String`		`v-model` as usually used with `<input/>` and `<textarea/>`
`contenteditable`	`Boolean`	`true`	Forwarded to DOM's `contenteditable` https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable.
`no-html`	`Boolean`	`true`	Prevent insertion (either typed or pasted) of html text
`no-nl`	`Boolean`	`false`	Prevent insertion of new-lines. Also activate `returned` event emission

Events

returned When the user press ⏎ and no-nl is set, then it emits the returned event with the current value (as a String) as argument.

All js events on the element can be transparantly listened to (the sample projects provide an example).

Changelogs

4.0.2

Add String as contenteditable type (To support non-standard values)

4.0.0

API breaking change : noNL and noHTML renamed to noNl and noHtml to enable using dashed prop names (no-nl and no-html in templates).
Build with vite instead of vue-cli : simpler build and less dev dependencies
Smaller package (previous version bundled vue... Oops.