vue2-ace-editor

vue2-ace-editor
====================


A packaging of ace

Demo here: https://github.com/chairuosen/vue-ace-editor-demo/tree/vue2

IMPORTANT

emmet support for html is removed after 0.0.6. because its code cannot works with strict mode.

if you want to use it. require emmet by your own.
``
npm install emmet@git+https://github.com/cloud9ide/emmet-core.git#41973fcc70392864c7a469cf5dcd875b88b93d4a
`

`js
require(['emmet/emmet'],function (data) { // this is huge. so require it async is better
window.emmet = data.emmet;
});
`

How to use

1. Install

`
npm install --save-dev vue2-ace-editor
`

2. Require it in components of Vue options

`js
{
data,
methods,
...
components: {
editor: require('vue2-ace-editor'),
},
}
`

3. Require the editor's mode/theme module in custom methods

`js
{
data,
methods: {
editorInit: function () {
require('brace/ext/language_tools') //language extension prerequsite...
require('brace/mode/html')
require('brace/mode/javascript') //language
require('brace/mode/less')
require('brace/theme/chrome')
require('brace/snippets/javascript') //snippet
}
},
}
`

4. Use the component in template

`html

`

prop v-model is required

prop lang and theme is same as ace-editor's doc

prop height and width could be one of these: 200, 200px, 50%

5. Access the ACE's instance

let editor = this.$refs.myEditor.editor

or

`
editorInit: function (editor) {

}
``