├── .npmignore
├── README.md
├── index.js
└── package.json


/.npmignore:
--------------------------------------------------------------------------------
1 | .*


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | vue-ace-editor
 2 | ====================
 3 | A packaging of [ace](https://ace.c9.io/)
 4 | 
 5 | Demo: https://github.com/chairuosen/vue-ace-editor-demo
 6 | 
 7 | ** Notice **
 8 | 
 9 | vue@1.0 only. Package for vue@2.0 here https://github.com/chairuosen/vue2-ace-editor
10 | 
11 | ## How to use
12 | 
13 | 1. Install
14 | 
15 |     ```
16 |     npm install --save-dev vue-ace-editor
17 |     ```
18 |     
19 | 2. Require it in `components` of Vue options
20 | 
21 |     ```
22 |     {
23 |         data,
24 |         methods,
25 |         ...
26 |         components: {
27 |             editor:require('vue-ace-editor'),
28 |         },
29 |     }
30 |     ```
31 |  
32 | 3. Require the editor's mode/theme module in options's events `vue-ace-editor:init`
33 | 
34 |     Because if require the modules inside the component dynamically. The size of bundle.js will be very huge.
35 |     
36 |     ```
37 |     {
38 |         data,
39 |         methods,
40 |         components,
41 |         events:{
42 |             'vue-ace-editor:init':function () {
43 |                 require('vue-ace-editor/node_modules/brace/mode/html');
44 |                 require('vue-ace-editor/node_modules/brace/mode/javascript');
45 |                 require('vue-ace-editor/node_modules/brace/mode/less');
46 |                 require('vue-ace-editor/node_modules/brace/theme/chrome');
47 |             }
48 |         },
49 |     }
50 |     ```
51 |     
52 | 4. Use the component in template
53 | 
54 |     ```
55 |     <editor :content.sync="html" lang="html" theme="chrome" width="300" height="300" ></editor>
56 |     ```
57 |     
58 |     prop `content`  is required
59 |     
60 |     prop `lang` and `theme` is same as [ace-editor's doc](https://github.com/ajaxorg/ace)
61 |     
62 |     prop `height` and `width` could be one of these:  `200`, `200px`, `50%`
63 |     
64 | 
65 | ## Notice
66 | 
67 | This is only a webpack version. If you use browserify. Check this [issue](https://github.com/chairuosen/vue-ace-editor/issues/1#issuecomment-235193574)
68 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var ace = require('brace');
 2 | 
 3 | require(['emmet/emmet'],function (data) {
 4 |     window.emmet = data.emmet;
 5 | });
 6 | 
 7 | var init = false;
 8 | 
 9 | module.exports = {
10 |     template:"<div :style=\"{height: height ? px(height) : '100%',width: width ? px(width) : '100%'}\"></div>",
11 |     props:{
12 |         content:{
13 |             type:String,
14 |             twoWay:true,
15 |             required:true
16 |         },
17 |         lang:String,
18 |         theme:String,
19 |         height:true,
20 |         width:true
21 |     },
22 |     data: function () {
23 |         return {
24 |             editor:null,
25 |             contentBackup:""
26 |         }
27 |     },
28 |     methods: {
29 |         px:function (n) {
30 |             if( /^\d*$/.test(n) ){
31 |                 return n+"px";
32 |             }
33 |             return n;
34 |         }
35 |     },
36 |     components: {},
37 |     watch:{
38 |         content:function (val) {
39 |             if(this.contentBackup !== val)
40 |                 this.editor.setValue(val,1);
41 |         }
42 |     },
43 |     ready: function () {
44 |         var vm = this;
45 |         var lang = this.lang||'text';
46 |         var theme = this.theme||'chrome';
47 |         if(!init){
48 |             vm.$dispatch('vue-ace-editor:init');
49 |             init = true;
50 |         }
51 | 
52 |         require('brace/ext/emmet');
53 | 
54 |         var editor = vm.editor = ace.edit(this.$el);
55 |         editor.$blockScrolling = Infinity;
56 |         editor.setOption("enableEmmet", true);
57 | 
58 |         editor.getSession().setMode('ace/mode/'+lang);
59 |         editor.setTheme('ace/theme/'+theme);
60 | 
61 |         editor.setValue(this.content,1);
62 | 
63 |         editor.on('change',function () {
64 |             vm.content = editor.getValue();
65 |             vm.contentBackup = vm.content;
66 |         });
67 | 
68 |     }
69 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ace-editor",
 3 |   "version": "1.0.3",
 4 |   "description": "A Vue's component based on ace/brace",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/chairuosen/vue-ace-editor.git"
12 |   },
13 |   "author": "chairuosen",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/chairuosen/vue-ace-editor/issues"
17 |   },
18 |   "homepage": "https://github.com/chairuosen/vue-ace-editor#readme",
19 |   "dependencies": {
20 |     "brace": "^0.8.0",
21 |     "emmet": "git+https://github.com/cloud9ide/emmet-core.git#41973fcc70392864c7a469cf5dcd875b88b93d4a"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------