A Vue's editor component based on ace/brace
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.npmignore
README.md Update README.md Jun 2, 2017
index.js v1.0.2 require the mode/theme modules outside the component in Vue's … Jun 20, 2016
package.json change emmet version to specified commit of git repo Jun 1, 2017

README.md

vue-ace-editor

A packaging of ace

Demo: https://github.com/chairuosen/vue-ace-editor-demo

** Notice **

vue@1.0 only. Package for vue@2.0 here https://github.com/chairuosen/vue2-ace-editor

How to use

  1. Install

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

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

    Because if require the modules inside the component dynamically. The size of bundle.js will be very huge.

    {
        data,
        methods,
        components,
        events:{
            'vue-ace-editor:init':function () {
                require('vue-ace-editor/node_modules/brace/mode/html');
                require('vue-ace-editor/node_modules/brace/mode/javascript');
                require('vue-ace-editor/node_modules/brace/mode/less');
                require('vue-ace-editor/node_modules/brace/theme/chrome');
            }
        },
    }
    
  4. Use the component in template

    <editor :content.sync="html" lang="html" theme="chrome" width="300" height="300" ></editor>
    

    prop content 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%

Notice

This is only a webpack version. If you use browserify. Check this issue