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

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

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

   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

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