Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue2-ace-editor2

collerek84MIT0.0.27

A Vue2.0's component based on ace/brace

readme

vue2-ace-editor

npm

A packaging of ace

require(['emmet/emmet'],function (data) { // this is huge. so require it async is better
    window.emmet = data.emmet;
});

How to use

  1. Install

     npm install --save-dev vue2-ace-editor
  2. Require it in components of Vue options

     {
         data,
         methods,
         ...
         components: {
             editor: require('vue2-ace-editor'),
         },
     }
  3. Require the editor's mode/theme module in custom methods

     {
         data,
         methods: {
             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/chrome')
                 require('brace/snippets/javascript') //snippet
             }
         },
     }
  4. Use the component in template

     <editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100"></editor>

    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%

  5. Access the ACE's instance

    <editor ref='myEditor'>

    let editor = this.$refs.myEditor.editor

    or

     editorInit: function (editor) {
    
     }