vue2-ace-editor
====================
[![npm](https://img.shields.io/npm/v/vue2-ace-editor.svg)](https://www.npmjs.com/package/vue2-ace-editor)
A packaging of [ace](https://ace.c9.io/)
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](https://github.com/ajaxorg/ace)
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) {
}
```