Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-contenteditable

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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.

  • 3.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.5K
decreased by-6.58%
Maintainers
1
Weekly downloads
 
Created
Source

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 nameTypeDefaultDescription
tagString"div"Html element type (p, div...)
v-modelStringv-model as usually used with <input/> and <textarea/>
contenteditableBooleantrueForwarded to DOM's contenteditable https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable.
noHTMLBooleantruePrevent insertion (either typed or pasted) of html text
noNLBooleanfalsePrevent 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 ! :)

FAQs

Package last updated on 31 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc