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

import VueCodeEditor from 'vue2-code-editor';
export default {
    ...
    components: {
        VueCodeEditor
    },
    ...
}

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

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

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