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.
New in version 3.0.0 : Typescript support !
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 user input text size.
Installation
NODE : Version 3.0.0 is only compatible with VueJS v3+. For VueJS v2, please install the version 1.0.2.
With a build system
npm install --save vue-contenteditable
or
yarn add vue-contenteditable
In your main.js
:
import contenteditable from 'vue-contenteditable'
Vue.use(contenteditable)
Or simply register in the components
field of each component using it.
(Re)build
The needed files are already provided in dist/
, but if you want to re-build, simlply run :
(To install the dependencies)
yarn
Due to a limitation in the vue cli plugin order, you have to manually edit the package.json
to put the lines :
"@hl037/vue-cli-plugin-ts-bundler": "hl037/vue-cli-plugin-ts-bundler.git"
At the end of the "devDependencies" object
yarn build
yarn bundleDts
The last command is for typescript support.
Directely in html
<script src="contenteditable.min.js"></script>
Usage
<template>
<contenteditable tag="div" :contenteditable="isEditable" v-model="message" :noNL="true" :noHTML="true" @returned="enterPressed" />
</template>
<script>
export default {
data() {
return {
isEditable: true,
message: "hello"
}
},
methods : {
enterPressed(){
alert('Enter Pressed');
}
}
}
For advance usages, please refer to the samples provided in the git repository. There is an example written in ts and one in js. These samples demonstrate all the the features of the component.
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. |
noHTML | Boolean | true | Prevent insertion (either typed or pasted) of html text |
noNL | Boolean | false | Prevent insertion of new-lines. Also activate returned event emission |
Events
returned
When the user press ⏎ and noNL
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).
License
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 ! :)