Update

Author: unknown

README.md

@@ -67,21 +67,24 @@ export default {
 <codemirror></codemirror>
 
 
-<!-- component data bind(Vue.js1.X) -->
-<codemirror :code.sync="code"></codemirror>
-
-
-<!-- component config example 1(Vue.js1.X) -->
+<!-- component data bind and config in Vue.js1.X -->
+<codemirror :code="code" :options="editorOption"></codemirror>
+<!-- Bidirectional data binding in Vue.js1.X -->
 <codemirror :code.sync="code" :options="editorOption"></codemirror>
 
 
-<!-- in vue.js2.X  .once and .sync are deprecated, parent component needs to explicitly emit an event instead of relying on implicit binding  -->
+<!-- component data bind and config in Vue.js2.X -->
+<codemirror :code="code" :options="editorOption"></codemirror>
+<!-- Bidirectional data binding in Vue.js2.X -->
+<codemirror v-model="code" :options="editorOption"></codemirror>
+<!-- or -->
+<!-- If you need to manually control the data synchronization, you can monitor the code change event like this -->
 <codemirror :code="code" :options="editorOption" @changed="codeChange"></codemirror>
 ```
 
 
 ``` javascript
-// editorOption example:
+// editor option example:
 export default {
   data () {
     return {
@@ -90,13 +93,13 @@ export default {
         tabSize: 4,
         mode: 'text/javascript',
         theme: 'base16-dark',
-        lineNumbers: true, 
+        lineNumbers: true,
         line: true,
         ...
       }
     }
   },
-  // if you use in vue2.X，parent component needs to explicitly emit an event instead of relying on implicit binding
+  // If you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
   methods: {
     codeChange(newCode) {
       console.log(newCode)
@@ -118,8 +121,8 @@ mode: {
 ```
 
 ``` html
-<!-- component config example 2(Vue.js1.X) -->
-<codemirror :code.sync="css" :options="{ tabSize: 2, mode: 'css' }"></codemirror>
+<!-- component config example 2 (Vue.js1.X) -->
+<codemirror :code.sync="css" :options="{ tabSize: 2, mode: 'text/css' }"></codemirror>
 ```
 
 ``` javascript
@@ -139,7 +142,7 @@ data () {
 
 [Codemirror themes](http://codemirror.net/demo/theme.html)
 
-[Codemirror language modes](http://codemirror.net/mode/)
+[Codemirror language modes](http://codemirror.net/mode/) (MIME types defined)
 
 
 

codemirror.vue

@@ -6,7 +6,7 @@
   var CodeMirror = require('codemirror/lib/codemirror.js')
   var CodeMirrorMetas = require('./metas.js')
   require('codemirror/lib/codemirror.css')
-  // var 
+  // var
   export default {
     data: function() {
       return {
@@ -15,6 +15,7 @@
     },
     props: {
       code: String,
+      value: String,
       options: {
         type: Object,
         default: function() {
@@ -41,7 +42,7 @@
         try {
          language = CodeMirrorMetas.findModeByMIME(language).mode
         } catch (e) {
-         throw new Error('CodeMirror language mode: ' + language + ' Configuration error (CodeMirror语言模式配置错误，或者不支持此语言)') 
+         throw new Error('CodeMirror language mode: ' + language + ' Configuration error (CodeMirror语言模式配置错误，或者不支持此语言)')
         }
       }
 
@@ -50,7 +51,7 @@
         try {
          language = CodeMirrorMetas.findModeByName(language.name).mode
         } catch (e) {
-         throw new Error('CodeMirror language mode: ' + language.name + ' Configuration error (CodeMirror语言模式配置错误，或者不支持此语言)') 
+         throw new Error('CodeMirror language mode: ' + language.name + ' Configuration error (CodeMirror语言模式配置错误，或者不支持此语言)')
         }
       }
 
@@ -64,20 +65,22 @@
     ready: function() {
       var _this = this
       this.editor = CodeMirror.fromTextArea(this.$el, this.options)
-      this.editor.setValue(this.code || this.content)
+      this.editor.setValue(this.code || this.value || this.content)
       this.editor.on('change', function(cm) {
         _this.content = cm.getValue()
+        // _this.value = cm.getValue()
         _this.code = cm.getValue()
       })
     },
     mounted: function() {
       var _this = this
       this.editor = CodeMirror.fromTextArea(this.$el, this.options)
-      this.editor.setValue(this.code || this.content)
+      this.editor.setValue(this.code || this.value || this.content)
       this.editor.on('change', function(cm) {
         _this.content = cm.getValue()
         if (!!_this.$emit) {
           _this.$emit('changed', _this.content)
+          _this.$emit('input', _this.content)
         }
       })
     },
@@ -88,6 +91,13 @@
           this.editor.setValue(newVal)
           this.content = newVal
         }
+      },
+      'value': function(newVal, oldVal) {
+        const editor_value = this.editor.getValue()
+        if (newVal !== editor_value) {
+          this.editor.setValue(newVal)
+          this.content = newVal
+        }
       }
     }
   }

example/Example.vue

@@ -4,10 +4,12 @@
     <h3>Codemirror Example1：</h3>
     <codemirror :code.sync="code" :options="editorOption"></codemirror>
     <pre>{{ code }}</pre>
+    <textarea v-model="code"></textarea>
     <hr>
     <h3>Codemirror Example2：</h3>
     <codemirror :code.sync="css" :options="{ mode: 'text/css', tabSize: 2 }"></codemirror>
     <pre>{{ css }}</pre>
+    <textarea v-model="css"></textarea>
   </div>
 </template>
 

example/Example2.vue

@@ -4,6 +4,12 @@
     <h3>Codemirror Example:</h3>
     <codemirror :code="code" :options="editorOption" @changed="codeChange"></codemirror>
     <pre>{{ code }}</pre>
+    <textarea v-model="code"></textarea>
+    <hr>
+    <h3>Codemirror Example2：</h3>
+    <codemirror v-model="code2" :options="editorOption"></codemirror>
+    <pre>{{ code2 }}</pre>
+    <textarea v-model="code2"></textarea>
   </div>
 </template>
 
@@ -15,7 +21,8 @@
     },
     data () {
       return {
-        code: '<div></div>',
+        code: '<div>1</div>',
+        code2: '<div>2</div>',
         css: '.class { display: block }',
         editorOption: {
           tabSize: 4,

example/app.js

@@ -6,8 +6,6 @@
 
 // Libs
 import Vue from 'vue'
-import Router from 'vue-router'
-import Resource from 'vue-resource'
 
 // App
 import App from './App.vue'
@@ -19,8 +17,6 @@ import Example from './Example.vue'
 import CodeMirror from 'vue-codemirror'
 
 // use
-Vue.use(Router)
-Vue.use(Resource)
 Vue.use(CodeMirror)
 
 // router

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-codemirror",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Codemirror component for Vue.js(1.x ~ 2.x)",
   "main": "index.js",
   "scripts": {