vue-inline-text-editor

An inline text editor for VueJS.
1,898
vue vuejs component text editor
Install
npm install vue-inline-text-editor
Latest Version:1.0.1
Vue:2
Last Updated:Oct 12, 2018
Links: npm
Maintainer: ricksharp7

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

Related Packages

vue2-editor

HTML editor using Vue.js 2, and Quill.js, an open source editor

2,125,001 2,510
text editor vue html editor quill vue-component
vue3-editor

HTML editor using Vue.js 3, and Quill.js, an open source editor

503,655 16
text editor vue html editor quill vue-component
vue2-quill-editor

HTML editor using Vue.js 2.0 and Quill.js, an open source editor

17,629
text editor vue html editor quill vue-component
vue-trix

Lightweight and simple Trix rich-text editor component for Vue.js

127,623 253
text editor vue javascript js trix vue text editor
vue2-tinymce-editor

A TinyMCE WYSIWYG editor component for your Vue products

27,445 9
text editor vue html editor tinymce tinymce vue vue-component vue2

Version History

Version Released Vue License
1.0.1 ^2.1.0
1.0.0 ^2.1.0