reuwi/ace-vue2

ace-vue2

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.