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
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.
NOTE : Versions 3.0.0+ are only compatible with VueJS v3+. For VueJS v2, please install the version 1.0.2.
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
or
yarn add vue-contenteditable
or
npm install --save vue-contenteditable
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
<script src="contenteditable.umd.js"></script>
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)
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.
<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>
<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>
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 |
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).
- Add String as contenteditable type (To support non-standard values)
- API breaking change :
noNL
andnoHTML
renamed tonoNl
andnoHtml
to enable using dashed prop names (no-nl
andno-html
in templates). - Build with vite instead of vue-cli : simpler build and less dev dependencies
- Smaller package (previous version bundled vue... Oops.
- Vue 3 support
- Typescript support
This code is provided as-is, under the terms of the MIT license (see License file for more details).
A link to the original sources and contribution / pull request is welcome if you enjoy / use / contribute to this module ! :)