vue-inline-text-editor

An inline text editor for VueJS.

Displays as standard text. Clicking the text opens an editor. Also supports various formatting and validation features.

Demo

Demo

Usage

Install

npm install vue-inline-text-editor --save

CommonJS

var VueInlineTextEditor = require('vue-inline-text-editor');
 
new Vue({
    components: {
        'vue-inline-text-editor': VueInlineTextEditor
    },
    data: function () {
        return {
            value: ''
        };
    },
    methods: {
        onBlur: function() {
            console.log('text blur:');
        },
        onClose: function() {
            console.log('text close:');
        },
        onChange: function () {
            console.log('text change:');
        },
        onOpen: function () {
            console.log('text open:');
        },
        onUpdate: function() {
            console.log('text update:');
        }
    },
    template: '<vue-inline-text-editor :value="value" @blur="onBlur" @close="onClose" @change="onChange" @open="onOpen" @update="onUpdate"></vue-inline-text-editor>'
});

ES6

import VueInlineTextEditor from 'inline-text-editor';
 
new Vue({
    components: {
        'inline-text-editor': VueInlineTextEditor
    },
    data: function () {
        return {
            value: ''
        };
    },
    methods: {
        onBlur: function() {
            console.log('text blur:');
        },
        onClose: function() {
            console.log('text close:');
        },
        onChange: function () {
            console.log('text change:');
        },
        onOpen: function () {
            console.log('text open:');
        },
        onUpdate: function() {
            console.log('text update:');
        }
    },
    template: '<inline-text-editor :value="value" @blur="onBlur" @close="onClose" @change="onChange" @open="onOpen" @update="onUpdate"></inline-text-editor>'
})

Props

Property	Type	Description	Default
autofocus	boolean	Set focus to the control once it is displayed	false
close-on-blur	boolean	Automatically close the control and save changes on blur	false
currency-decimal-places	integer	For currency values, the number of decimal places to display	2
currency-symbol	string	For currency values, the symbol to display	$
disabled	boolean	If true, the field cannot be edited	false
hover-effects	boolean	If true, display a hover state	false
max-length	integer	The maximum string length to allow	null
min-length	integer	The minimum string length to allow	null
placeholder	string	Placeholder text to display	null
required	boolean	If true, a value is required	false
type	string	The type of control. Options include: 'text', 'number', 'currency', 'percentage'	text
value.sync	mixed	The value to bind to. Be sure to include the sync modifier

Contribution

First, install dependencies

npm install

Second, setup development environment

vue serve main.js

Third, run tests as you develop. Please provide tests for any new features.

npm run test

Fourth, check inting

npm run lint

Fifth, build the dist files

npm run build

License

MIT

Author

Rick Sharp for CauseLabs