vue2

ymoriaud · Oct 27, 2016 · 0f8f9c5 · 0f8f9c5
1 parent 0f22e32
commit 0f8f9c5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,13 @@
-vue-ace-editor
+vue2-ace-editor
 ====================
 A packaging of [ace](https://ace.c9.io/)
 
-Demo: https://github.com/chairuosen/vue-ace-editor-demo
-
 ## How to use
 
 1. Install
 
     ```
-    npm install --save-dev vue-ace-editor
+    npm install --save-dev vue2-ace-editor
     ```
     
 2. Require it in `components` of Vue options
@@ -20,22 +18,18 @@ Demo: https://github.com/chairuosen/vue-ace-editor-demo
         methods,
         ...
         components: {
-            editor:require('vue-ace-editor'),
+            editor:require('vue2-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.
+3. Require the editor's mode/theme module in custom methods
     
     ```
     {
         data,
-        methods,
-        components,
-        events:{
-            'vue-ace-editor:init':function () {
+        methods:{
+            editorInit: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');
@@ -48,16 +42,12 @@ Demo: https://github.com/chairuosen/vue-ace-editor-demo
 4. Use the component in template
 
     ```
-    <editor :content.sync="html" lang="html" theme="chrome" width="300" height="300" ></editor>
+    <editor v-model="content" @init="editorInit();" lang="html" theme="chrome" width="500" height="100"></editor>
     ```
     
-    prop `content`  is required
+    prop `v-model`  is required
     
     prop `lang` and `theme` is same as [ace-editor's doc](https://github.com/ajaxorg/ace)
     
     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](https://github.com/chairuosen/vue-ace-editor/issues/1#issuecomment-235193574)
diff --git a/index.js b/index.js
@@ -4,14 +4,11 @@ require(['emmet/emmet'],function (data) {
     window.emmet = data.emmet;
 });
 
-var init = false;
-
 module.exports = {
     template:"<div :style=\"{height: height ? px(height) : '100%',width: width ? px(width) : '100%'}\"></div>",
     props:{
-        content:{
+        value:{
             type:String,
-            twoWay:true,
             required:true
         },
         lang:String,
@@ -33,21 +30,18 @@ module.exports = {
             return n;
         }
     },
-    components: {},
     watch:{
-        content:function (val) {
+        value:function (val) {
             if(this.contentBackup !== val)
                 this.editor.setValue(val,1);
         }
     },
-    ready: function () {
+    mounted: function () {
         var vm = this;
         var lang = this.lang||'text';
         var theme = this.theme||'chrome';
-        if(!init){
-            vm.$dispatch('vue-ace-editor:init');
-            init = true;
-        }
+
+        this.$emit('init');
 
         require('brace/ext/emmet');
 
@@ -58,12 +52,13 @@ module.exports = {
         editor.getSession().setMode('ace/mode/'+lang);
         editor.setTheme('ace/theme/'+theme);
 
-        editor.setValue(this.content,1);
+        editor.setValue(this.value,1);
 
         editor.on('change',function () {
-            vm.content = editor.getValue();
-            vm.contentBackup = vm.content;
+            var content = editor.getValue();
+            vm.$emit('input',content);
+            vm.contentBackup = content;
         });
 
     }
-}
+}
diff --git a/package.json b/package.json
@@ -1,21 +1,21 @@
 {
-  "name": "vue-ace-editor",
-  "version": "1.0.2",
-  "description": "A Vue's component based on ace/brace",
+  "name": "vue2-ace-editor",
+  "version": "0.0.1",
+  "description": "A Vue2.0's component based on ace/brace",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chairuosen/vue-ace-editor.git"
+    "url": "git+https://github.com/chairuosen/vue2-ace-editor.git"
   },
   "author": "chairuosen",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/chairuosen/vue-ace-editor/issues"
+    "url": "https://github.com/chairuosen/vue2-ace-editor/issues"
   },
-  "homepage": "https://github.com/chairuosen/vue-ace-editor#readme",
+  "homepage": "https://github.com/chairuosen/vue2-ace-editor#readme",
   "dependencies": {
     "brace": "^0.8.0",
     "emmet": "git+https://github.com/cloud9ide/emmet-core.git"