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

1import VueCodeEditor from 'vue2-code-editor';
2export default {
3    ...
4    components: {
5        VueCodeEditor
6    },
7    ...
8}

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

1export default {
2    ...
3    methods: {
4        dataSumit() {
5            //code here
6        },
7        editorInit: function () {
8            // vue2-code-editor/node_modules/
9            require('brace/ext/language_tools') //language extension prerequsite...
10            require('brace/mode/html') //language 
11            require('brace/mode/javascript')   
12            require('brace/mode/less')
13            require('brace/theme/monokai')
14            require('brace/snippets/javascript') //snippet
15        }
16    },
17    ...
18}

4. Use the component in template

1<VueCodeEditor 
2    v-model="content" 
3    @init="editorInit" 
4    lang="javascript" 
5    theme="monokai" 
6    width="100%" 
7    height="200px"
8    :options="{
9        enableBasicAutocompletion: true,
10        enableLiveAutocompletion: true,
11        fontSize: 14,
12        highlightActiveLine: true,
13        enableSnippets: true,
14        showLineNumbers: true,
15        tabSize: 2,
16        showPrintMargin: false,
17        showGutter: true,
18    }"
19    :commands="[
20        {
21            name: 'save',
22            bindKey: { win: 'Ctrl-s', mac: 'Command-s' },
23            exec: null,
24            readOnly: true,
25        },
26    ]"
27    />

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%