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

   1import AceEditor from 'vuejs-ace-editor';
   2export default {
   3    ...
   4    components: {
   5        AceEditor
   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            require('brace/ext/language_tools') //language extension prerequsite...
   9            require('brace/mode/html')                
   10            require('brace/mode/javascript')    //language
   11            require('brace/mode/less')
   12            require('brace/theme/monokai')
   13            require('brace/snippets/javascript') //snippet
   14        }
   15    },
   16    ...
   17}

4. Use the component in template

   1<AceEditor 
   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: dataSumit,
   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%