ace-vue2
A ace package for Vue2 , and based on brace.
Developing.
Install
$ npm install ace-vue2
Usage
export
in <script>
and register the editor in components
options.
Import it before 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'),
},
...
}
brace
before export
Import the editor's mode & theme module from import 'brace/mode/javascript'
import 'brace/theme/chrome'
template
.
Use the editor as a component in your <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.