Update documents

Author: surmon-china

.github/ISSUE_TEMPLATE.md

@@ -11,7 +11,7 @@
 
 #### Reproduction Link
 - A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
-- You could start with this template: https://jsfiddle.net/u1f16q85/
+- You could start with this template: https://jsfiddle.net/surmon/cp01hvq2/
 
 #### Steps to reproduce
 

README.md

@@ -4,126 +4,113 @@
 [![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-codemirror.svg?style=flat-square)](https://github.com/surmon-china/vue-codemirror/network)
 [![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-codemirror)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-codemirror)
-[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-codemirror.svg?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-codemirror)
 
 [![NPM](https://nodei.co/npm/vue-codemirror.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-codemirror/)
 [![NPM](https://nodei.co/npm-dl/vue-codemirror.png?months=9&height=3)](https://nodei.co/npm/vue-codemirror/)
 
 
-# Vue-Codemirror
-[Codemirror](http://codemirror.net/) component for Vue.
+## vue-codemirror
+[CodeMirror](http://codemirror.net/) component for Vue.
 
-基于 [Codemirror](http://codemirror.net/)，适用于 Vue 的 Web 代码编辑器。
+基于 [CodeMirror](http://codemirror.net/)，适用于 Vue 的 Web 代码编辑器。
 
-# Example
+### Example
 
-[Demo Page](https://surmon-china.github.io/vue-codemirror)
+- [Demo Page](https://surmon-china.github.io/vue-codemirror)
+- [CDN Example](https://jsfiddle.net/surmon/cp01hvq2/)
+- [Nuxt.js/SSR example code](https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-codemirror/nuxt)
 
-[CDN Example](https://jsfiddle.net/u1f16q85/)
+### Events
 
-[Nuxt.js/SSR example code](https://github.com/surmon-china/vue-codemirror/blob/master/examples/nuxt-ssr-example)
+To make it easier to handle events, the component converts some codemirror built-in native events into a single vue component event, where you can listen for events from both the component itself and from codemirror. If you need to listen for more and more complex events, you can pass in the event names (Array) you need for the global `Vue.use(, { events: [] })` and the component parameters `:events`, respectively, or by the `this.codemirror.on(event, hanger)` method of the codemirror instance. Here's a list of events:
 
-# Events
+**codemirror event list:**
+- `scroll`
+- `changes`
+- `beforeChange`
+- `cursorActivity`
+- `keyHandled`
+- `inputRead`
+- `electricInput`
+- `beforeSelectionChange`
+- `viewportChange`
+- `swapDoc`
+- `gutterClick`
+- `gutterContextMenu`
+- `focus`
+- `blur`
+- `refresh`
+- `optionChange`
+- `scrollCursorIntoView`
+- `update`
+
+**component event list:**
+- `ready`
+- `input`
+
+
+### Install
+
+**NPM**
 
-To make it easier to handle events, the component converts some codemirror built-in native events into a single vue component event, where you can listen for events from both the component itself and from codemirror. If you need to listen for more and more complex events, you can pass in the event names (Array) you need for the global `Vue.use(, { events: [] })` and the component parameters `:events`, respectively, or by the `this.codemirror.on(event, hanger)` method of the codemirror instance. Here's a list of events:
+``` bash
+npm install vue-codemirror --save
+
+# or
+yarn add vue-codemirror
+```
 
-**codemirror events list:**
-- scroll
-- changes
-- beforeChange
-- cursorActivity
-- keyHandled
-- inputRead
-- electricInput
-- beforeSelectionChange
-- viewportChange
-- swapDoc
-- gutterClick
-- gutterContextMenu
-- focus
-- blur
-- refresh
-- optionChange
-- scrollCursorIntoView
-- update
-
-**component events list:**
-- ready
-- input
-
-
-# Install
-
-#### CDN
+**CDN**
 
 ``` html
 <link rel="stylesheet" href="path/to/codemirror/lib/codemirror.css">
 <script type="text/javascript" src="path/to/codemirror.js"></script>
 <script type="text/javascript" src="path/to/vue.min.js"></script>
 <script type="text/javascript" src="path/to/dist/vue-codemirror.js"></script>
-<script type="text/javascript" src="path/to/codemirror/some-resources.js"></script>
+<script type="text/javascript" src="path/to/codemirror/{some-resources}"></script>
 <script type="text/javascript">
   Vue.use(window.VueCodemirror)
 </script>
 ```
 
-#### NPM
-
-``` bash
-npm install vue-codemirror --save
-```
-
 ### Mount
 
-#### mount with global
+**mount with global**
 
 ``` javascript
-// require lib
 import Vue from 'vue'
 import VueCodemirror from 'vue-codemirror'
 
-// require styles
+// import base styles
 import 'codemirror/lib/codemirror.css'
 
-// require more codemirror resource...
+// import more codemirror resource...
 
-// you can set default global options and events when use
-Vue.use(VueCodemirror, /* { 
+// you can set default global options and events when Vue.use
+Vue.use(VueCodemirror, /* {
   options: { theme: 'base16-dark', ... },
   events: ['scroll', ...]
 } */)
 ```
 
-#### mount with component
+**mount with component**
 
 ```javascript
-// require component
 import { codemirror } from 'vue-codemirror'
 
-// require styles
+// import base styles
 import 'codemirror/lib/codemirror.css'
 
-// require more codemirror resource...
+// import more codemirror resource...
 
-// component
 export default {
   components: {
     codemirror
   }
 }
 ```
 
-#### mount with ssr
-
-```javascript
-// If used in nuxt.js/ssr, you should keep it only in browser build environment
-if (process.browser) {
-  const VueCodemirror = require('vue-codemirror')
-  Vue.use(VueCodemirror)
-}
-```
-
-#### defined codemirror mode
+**defined codemirror mode**
 
 ```javascript
 import CodeMirror from 'codemirror'
@@ -141,55 +128,60 @@ CodeMirror.defineMode('mymode', () => {
     }
   }
 })
+
+// Vue app...
 ```
 
 ### Component
 
 ```vue
 <template>
-  <!-- bidirectional data binding（双向数据绑定） -->
-  <codemirror v-model="code" :options="cmOptions"></codemirror>
-
-  <!-- or to manually control the datasynchronization（或者手动控制数据流，需要像这样手动监听changed事件） -->
-  <codemirror ref="myCm"
-              :value="code" 
-              :options="cmOptions"
-              @ready="onCmReady"
-              @focus="onCmFocus"
-              @input="onCmCodeChange">
-  </codemirror>
-
-  <!-- if Nust.js/SSR（如果在 Nuxt.js 环境下，需要外面包裹一层 no-ssr） -->
-  <no-ssr placeholder="Codemirror Loading...">
-    <codemirror ref="myCm"
-                :value="code" 
-                :options="cmOptions"
-                @ready="onCmReady"
-                @focus="onCmFocus"
-                @input="onCmCodeChange">
-    </codemirror>
-  </no-ssr>
+  <!-- Two-way Data-Binding -->
+  <codemirror v-model="code" :options="cmOptions" />
+
+  <!-- Or manually control the data synchronization -->
+  <codemirror
+    ref="cmEditor"
+    :value="code"
+    :options="cmOptions"
+    @ready="onCmReady"
+    @focus="onCmFocus"
+    @input="onCmCodeChange"
+  />
+
+  <!-- Nuxt.js -->
+  <client-only placeholder="Codemirror Loading...">
+    <codemirror
+      ref="cmEditor"
+      :value="code" 
+      :options="cmOptions"
+      @ready="onCmReady"
+      @focus="onCmFocus"
+      @input="onCmCodeChange"
+    />
+  </client-only>
 </template>
 
 <script>
-// language js
+// import language js
 import 'codemirror/mode/javascript/javascript.js'
-// theme css
+
+// import theme css
 import 'codemirror/theme/base16-dark.css'
-// more codemirror resources
-// import 'codemirror/some-resource...'
+
+// import more 'codemirror/some-resource...'
+
 export default {
   data () {
     return {
       code: 'const a = 10',
       cmOptions: {
-        // codemirror options
         tabSize: 4,
         mode: 'text/javascript',
         theme: 'base16-dark',
         lineNumbers: true,
         line: true,
-        // more codemirror options, 更多 codemirror 的高级配置...
+        // more codemirror options...
       }
     }
   },
@@ -198,7 +190,7 @@ export default {
       console.log('the editor is readied!', cm)
     },
     onCmFocus(cm) {
-      console.log('the editor is focus!', cm)
+      console.log('the editor is focused!', cm)
     },
     onCmCodeChange(newCode) {
       console.log('this is new code', newCode)
@@ -207,11 +199,11 @@ export default {
   },
   computed: {
     codemirror() {
-      return this.$refs.myCm.codemirror
+      return this.$refs.cmEditor.codemirror
     }
   },
   mounted() {
-    console.log('this is current codemirror object', this.codemirror)
+    console.log('the current codemirror instance object:', this.codemirror)
     // you can use this.codemirror to do something...
   }
 }
@@ -224,21 +216,25 @@ export default {
 
 ```vue
 <template>
-  <codemirror :merge="true" :options="cmOption" @scroll="onCmScroll"></codemirror>
+  <codemirror :merge="true" :options="cmOption" @scroll="onCmScroll" />
 </template>
 
 <script>
   // merge js
   import 'codemirror/addon/merge/merge.js'
+  
   // merge css
   import 'codemirror/addon/merge/merge.css'
+  
   // google DiffMatchPatch
   import DiffMatchPatch from 'diff-match-patch'
+  
   // DiffMatchPatch config with global
   window.diff_match_patch = DiffMatchPatch
   window.DIFF_DELETE = -1
   window.DIFF_INSERT = 1
   window.DIFF_EQUAL = 0
+  
   export default {
     data() {
       return {
@@ -263,11 +259,9 @@ export default {
 </script>
 ```
 
-
 ### Codemirror language mode types
-编辑器的模式（mode属性）分为 字符串、对象两种方式，Codemirror 官方文档有说明
 
-`mode: 'string' || object`
+Codemirror language mode have [string | object](https://codemirror.net/doc/manual.html#option_mode) types.
 
 ``` javascript
 // MIME types
@@ -295,14 +289,10 @@ mode: {
 }
 ```
 
-# CodeMirror
+### CodeMirror
 
 - [CodeMirror language modes](http://codemirror.net/mode/) (MIME types defined)
 - [CodeMirror Autoresize](https://codemirror.net/demo/resize.html)
 - [CodeMirror themes](http://codemirror.net/demo/theme.html)
 - [CodeMirror events](https://codemirror.net/doc/manual.html#events)
 - [CodeMirror APIs](http://codemirror.net/doc/manual.html#config)
-
-
-# Author
-[Surmon](https://surmon.me)