vue2-code-editor

vue2-code-editor
====================


A packaging of
Vue2-code-editor is a front-end code editor for vue development based on ACE.

How to use

#### 1. Install
``
npm install vue2-code-editor --save
`

#### 2. Require it in components of Vue options
`js
import VueCodeEditor from 'vue2-code-editor';
export default {
...
components: {
VueCodeEditor
},
...
}
`

#### 3. Require the editor's mode/theme module in custom methods
`js
export default {
...
methods: {
dataSumit() {
//code here
},
editorInit: function () {
// vue2-code-editor/node_modules/
require('brace/ext/language_tools') //language extension prerequsite...
require('brace/mode/html') //language
require('brace/mode/javascript')
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: null,
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%`