ace-vue2

ace editor for vue2.0

Stats

StarsIssuesVersionUpdatedCreatedSize
ace-vue2
310.3.04 years ago4 years agoMinified + gzip package size for ace-vue2 in KB

Readme

ace-vue2

NPM version

A ace package for Vue2 , and based on brace.

Developing.

Install

$ npm install ace-vue2

Usage

Import it before export in <script> and register the editor in components options.

import editor from 'ace-vue2'
export default {
    components: {
        editor
    },
    ...
}

Or use require to require it in components of Vue options.

export default {
    components: {
        editor:require('vue2-ace-editor'),
    },
    ...
}

Import the editor's mode & theme module from brace before export

import 'brace/mode/javascript'
import 'brace/theme/chrome'

Use the editor as a component in your template.

<editor height="200px" :content="content" > </editor>

content is a String and it is required.

Get the codes which are written in the editor.

See Events part.

To get the value, you can use getValue() method in your vue scripts. getValue() is a method of the editor componnent, and it returns the content of the editor. So, use it as following:

let code = this.$children[0].getValue();

Props

props type defalut required
content String ""
lang String javascript
theme String chrome
height String 400px
width String 100%
sync Boolean false
readOnly Boolean false
options Object {}

Events

change

parameter: type String

Emitted whenever the document is changed. Use v-on:change in template as following:

<editor v-on:change="change"> </editor>

And the event handler in parent component as following:

methods: {
    change: function(doc) {
        console.log(doc);
    }
}

copy

parameter: type String

Emitted when text is copied.

<editor v-on:copy="copy"> </editor>

And the event handler in parent component as following:

methods: {
    copy: function(str) {
        console.log(str);
    }
}

paste

no parameters. Emitted when text is pasted.

<editor v-on:paste="paste"> </editor>

And the event handler in parent component as following:

methods: {
    paste: function() {
        console.log('paste');
    }
}

Methods

getValue : get the content of the editor.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.