# vue-contenteditable-input

> Contenteditable directive with v-model, auto focus, preventing new line on enter, formatting html text to plain text etc.,

Latest version **0.1.4** (published 2020-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-contenteditable-input
pnpm add vue-contenteditable-input
yarn add vue-contenteditable-input
bun add vue-contenteditable-input
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2020-04-02 |
| First published | 2020-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 129.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sudheer Ranga |
| Maintainers | sudheerranga |
| Keywords | Vue, directive, contenteditable, input |

## Links

- npm: https://www.npmjs.com/package/vue-contenteditable-input
- Homepage: https://github.com/sudheer-ranga/vue-contenteditable-input
- Issues: https://github.com/sudheer-ranga/vue-contenteditable-input/issues
- npm.io page: https://npm.io/package/vue-contenteditable-input

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2020-04-02
- 0.1.3 — 2020-04-02
- 0.1.2 — 2020-04-01
- 0.1.1 — 2020-04-01
- 0.1.0 — 2020-04-01

## README

# vue-contenteditable-input

This plugin provides support for `contenteditable` element supporting `v-model`. It also provides some additional (optional) features like autofocus, placeholder, preventing html input / paste or new lines.

`vue-contenteditable-input` has full support of v-model reactivity.

# Should you use a content editable ?

The response is generally **NO**. But there are cases when neither `<input/>` nor `<textarea>` could suit your needs, for example when you need a dynamic object size to adapt to user input text size.

# Installation

With a build system

```sh
$ npm install --save vue-contenteditable-input
```

### To make the plugin available globally
In your `main.js`:

```javascript
const VueContenteditableInput = require('vue-contenteditable-input')
Vue.use(VueContenteditableInput)
```

**OR**

To include only in specific components
```javascript
import VueContenteditableInput from 'vue-contenteditable-input'
```

### (Re)build
```
The required files are provided in `dist/` folder, but if you want to rebuild, simlply run :

npm run build
```

### Directely in html

```html
<script src="vue-contenteditable-input.min.js"></script>
```

### Usage

When you need a `contenteditable` element:

```javascript
<template>
  <vue-contenteditable-editable tag="div" placeholder="Enter content" :contenteditable="true" v-model="message" :disable-newline="true" @enter="enterPressed" :autofocus="true" />
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods : {
    enterPressed(value) {
      alert('Enter Pressed with: ', value);
    }
  }
}
```

### Props
| Name | Type | Default Value | Description |
| ------ | ------ | ------ | ------ |
| `tag` | `String` | `span` | |
| `contenteditable` | `Boolean` | `true` | |
| `input-ref` | `String` | `editable-input` | |
| `v-model` | `String` | `''` | |
| `placeholder` | `String` | `''` | |
| `autofocus` | `Boolean` | `false` | |
| `disable-newline` | `Boolean` | `false` | |
| `format-text` | `Boolean` | `false` | |

### Events
`enter`
 When the user press :kbd:Return and `disable-newline` is set, then it emits the `enter` event with the current value (as ``String``) as argument.

### 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 are welcome if you enjoy / use / contribute to this module ! :)

---
_Source: https://npm.io/package/vue-contenteditable-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._