vuejs-ace-editor

vuejs-ace-editor
====================


A packaging of ace

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

How to use

1. Install

``
npm install vuejs-ace-editor
`

2. Require it in components of Vue options

`js
import AceEditor from 'vuejs-ace-editor';
export default {
...
components: {
AceEditor
},
...
}
`

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

`js
export default {
...
methods: {
dataSumit() {
//code here
},
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/monokai')
require('brace/snippets/javascript') //snippet
}
},
...
}
`

4. Use the component in template

`html
v-model="content"
@init="editorInit"
lang="javascript"
theme="monokai"
width="100%"
height="200px"
:options="{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
fontSize: 14,
highlightActiveLine: true,
enableSnippets: true,
showLineNumbers: true,
tabSize: 2,
showPrintMargin: false,
showGutter: true,
}"
:commands="[
{
name: 'save',
bindKey: { win: 'Ctrl-s', mac: 'Command-s' },
exec: dataSumit,
readOnly: true,
},
]"
/>
`

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%`