Update to V2.1.5

Author: unknown

.npmignore

@@ -1,10 +1,5 @@
 # Dependency directories
 node_modules
 
-example
-/example
-example/
-
-screenshots
-screenshots/
-/screenshots
+examples
+/examples

README.md

@@ -7,8 +7,16 @@
 
 
 # Vue-Codemirror
-Codemirror component for Vue.js(1.x ~ 2.x)，本组件基于 [Codemirror](http://codemirror.net/)构建，支持Vue全版本使用，支持100+多种语言、分支语言、语法，支持多种代码高亮theme，并可以自行配置，可使用Vue-Codemirror快速轻易构建出多种丰富全面的web code editor，并以此基础多次开发WebIDE
+Codemirror component for Vue.js(1.x ~ 2.x)，组件基于 [Codemirror](http://codemirror.net/)构建，支持Vue目前全部版本，支持100+多种语言、分支语言、语法，支持多种代码高亮theme，并可以自行配置；可使用Vue-Codemirror快速轻易构建出多种丰富全面的web code editor，并以此基础多次开发WebIDE。
 
+> ### V2.1.5
+> 增加代码补全提示、选中高亮、整行高亮、（sublime、emacs、vim）三种键位模式、代码块折叠、vue编码的支持...
+
+> ### V2.1.3
+> 重构example页面，优化释放方法，修复部分小问题
+
+> ### V2.1.2
+> add unseen line marker
 
 
 # Example
@@ -28,15 +36,13 @@ npm install vue-codemirror --save
 ### Vue use
 
 ``` javascript
-// import with ES6
+// import in ES6
 import Vue from 'vue'
-// ...
 import CodeMirror from 'vue-codemirror'
 
 
-// require with Webpack/Node.js
+// require in Webpack/Node.js
 var Vue = require('vue')
-// ...
 var CodeMirror = require('vue-codemirror')
 
 
@@ -49,10 +55,9 @@ Vue.use(CodeMirror)
 
 // or use with component(ES6)
 import Vue from 'vue'
-// ...
 import { codemirror } from 'vue-codemirror'
 
-// use
+// use in component
 export default {
   components: {
     codemirror
@@ -64,22 +69,31 @@ export default {
 ### Use in components
 
 ``` html
+<!-- 基础使用 -->
 <codemirror></codemirror>
 
 
-<!-- component data bind and config in Vue.js1.X -->
+<!-- use in vue1.0（Vue1中应用） -->
+
+<!-- component data bind and config（基础配置/父->子单向数据流） -->
 <codemirror :code="code" :options="editorOption"></codemirror>
-<!-- Bidirectional data binding in Vue.js1.X -->
+<!-- Bidirectional data binding（双向数据绑定） -->
 <codemirror :code.sync="code" :options="editorOption"></codemirror>
+<!-- 也可以这样简约配置 -->
+<codemirror :code.sync="code" :options="{ tabSize: 2, mode: 'text/css' }"></codemirror>
+
 
+<!-- use in vue2.0（Vue2中应用） -->
 
-<!-- component data bind and config in Vue.js2.X -->
+<!-- component data bind and config（基础配置/父->子单向数据流） -->
 <codemirror :code="code" :options="editorOption"></codemirror>
-<!-- Bidirectional data binding in Vue.js2.X -->
+<!-- Bidirectional data binding（双向数据绑定） -->
 <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 -->
+<!-- If you need to manually control the data synchronization, you can monitor the code change event like this（如果你需要手动控制数据流，就需要像这样手动监听changed事件） -->
 <codemirror :code="code" :options="editorOption" @changed="codeChange"></codemirror>
+
+<!-- 如果需要代码提示功能，要在组件传入hint属性为true，如果需要在后续获取codemirror对象做什么事，应该在这里定义一个ref属性 -->
+<codemirror v-model="code" :options="editorOption" :hint="true" ref="myEditor"></codemirror>
 ```
 
 
@@ -90,49 +104,63 @@ export default {
     return {
       code: 'const a = 10',
       editorOption: {
+        // 下面所有配置同Codemirror配置，均为可选
         tabSize: 4,
         mode: 'text/javascript',
         theme: 'base16-dark',
         lineNumbers: true,
         line: true,
-        ...
+        // sublime、emacs、vim三种键位模式，支持你的不同操作习惯
+        keyMap: "sublime",
+        // 按键映射，比如Ctrl键映射autocomplete，autocomplete是hint代码提示事件
+        extraKeys: { "Ctrl": "autocomplete" },
+        // 代码折叠
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+        // 选中文本自动高亮，及高亮方式
+        styleSelectedText: true,
+        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
+        // more codemirror config...
+        // 如果有hint方面的配置，也应该出现在这里
       }
     }
   },
   // If you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
+  // 在2.0中如果需要手动控制数据同步，父组件需要显式地处理changed事件
   methods: {
     codeChange(newCode) {
-      console.log(newCode)
+      console.log('this is new code', newCode)
       this.code = newCode
     }
+  },
+  // example code (if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined)
+  // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
+  computed: {
+    editor() {
+      return this.$refs.myEditor.editor
+    }
+  },
+  mounted() {
+    // you can use current editor object to do something(editor methods)
+    // 然后你就可以使用当前上下文内的editor对象去做你想做的事了
+    console.log('this is current editor object', this.editor)
+    // this.editor to do something...
   }
 }
 
-// editorOption mode types:
+// editor options mode types:
+// 编辑器的模式（mode属性）分为 字符串、对象两种方式，可以在下面的相关链接中找到语言列表
 
-// string mode
+// string mode（MIME types/字符串方式）
 mode: 'text/javascript'
 
-// object mode
+// object mode（对象方式）
 mode: {
   name: 'javascript',
   json: true
 }
 ```
 
-``` html
-<!-- component config example 2 (Vue.js1.X) -->
-<codemirror :code.sync="css" :options="{ tabSize: 2, mode: 'text/css' }"></codemirror>
-```
-
-``` javascript
-data () {
-  return {
-    css: '.class { display: block }'
-  }
-}
-```
-
 
 # More Config
 

codemirror.vue

@@ -6,14 +6,16 @@
   var CodeMirror = require('codemirror/lib/codemirror.js')
   var CodeMirrorMetas = require('./metas.js')
   require('codemirror/lib/codemirror.css')
-  // var
+  require('codemirror/addon/display/fullscreen.css')
+  require('codemirror/addon/display/fullscreen.js')
   export default {
     data: function() {
       return {
         content: ''
       }
     },
     props: {
+      hint: Boolean,
       code: String,
       value: String,
       unseenLines: Array,
@@ -34,33 +36,87 @@
       this.options  = this.options || {}
       var language  = this.options.mode || 'text/javascript'
       var theme     = this.options.theme
-
-      // string config or object config
-      var isString = (typeof language == 'string')
-      // console.log(language, typeof language, isString)
+      var hint      = this.hint || false
+      var hints     = ['css', 'html', 'javascript', 'sql', 'xml']
 
       // string config
-      if (isString) {
+      if (typeof language == 'string') {
         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语言模式配置错误，或者不支持此语言) See http://codemirror.net/mode/ for more details.')
         }
       }
 
       // object config
-      if (!isString) {
+      if (typeof language == 'object') {
         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语言模式配置错误，或者不支持此语言) See http://codemirror.net/mode/ for more details.')
         }
       }
 
-      // console.log(language)
-      // require editor language and theme config
+      // require hint config
+      if (hint) {
+        require('codemirror/addon/hint/show-hint.js')
+        require('codemirror/addon/hint/show-hint.css')
+        var isAnyword = hints.indexOf(language) == -1
+        require('codemirror/addon/hint/' + (isAnyword ? 'anyword' : language) + '-hint.js')
+      }
+
+      // require active-line.js
+      if (this.options.styleActiveLine) require('codemirror/addon/selection/active-line.js')
+
+      // require closebrackets.js
+      if (this.options.autoCloseBrackets) require('codemirror/addon/edit/closebrackets.js')
+
+      // require closetag.js
+      if (this.options.autoCloseTags) require('codemirror/addon/edit/closetag.js')
+
+      // require styleSelectedText.js
+      if (this.options.styleSelectedText) {
+        require('codemirror/addon/selection/mark-selection.js')
+        require('codemirror/addon/search/searchcursor.js')
+      }
+
+      // highlightSelectionMatches
+      if (this.options.highlightSelectionMatches) {
+        require('codemirror/addon/scroll/annotatescrollbar.js')
+        require('codemirror/addon/search/matchesonscrollbar.js')
+        require('codemirror/addon/search/searchcursor.js')
+        require('codemirror/addon/search/match-highlighter.js')
+      }
+
+      // require emacs
+      if (!!this.options.keyMap && ['emacs', 'sublime', 'vim'].indexOf(this.options.keyMap) > -1) {
+        require('codemirror/mode/clike/clike.js')
+        require('codemirror/addon/edit/matchbrackets.js')
+        require('codemirror/addon/comment/comment.js')
+        require('codemirror/addon/dialog/dialog.js')
+        require('codemirror/addon/dialog/dialog.css')
+        require('codemirror/addon/search/searchcursor.js')
+        require('codemirror/addon/search/search.js')
+        // console.log(this.options.keyMap)
+        require('codemirror/keymap/'+ this.options.keyMap +'.js')
+      }
+
+      // require fold js
+      if (this.options.foldGutter) {
+        require('codemirror/addon/fold/foldgutter.css')
+        require('codemirror/addon/fold/brace-fold.js')
+        require('codemirror/addon/fold/comment-fold.js')
+        require('codemirror/addon/fold/foldcode.js')
+        require('codemirror/addon/fold/foldgutter.js')
+        require('codemirror/addon/fold/indent-fold.js')
+        require('codemirror/addon/fold/markdown-fold.js')
+        require('codemirror/addon/fold/xml-fold.js')
+      }
+
+      // require language mode config
       require('codemirror/mode/' + language + '/' + language + '.js')
 
+      // require theme config
       if (!!theme && theme == 'solarized light') theme = 'solarized'
       if (!!theme && theme != 'default') require('codemirror/theme/' + theme + '.css')
     },
@@ -124,9 +180,8 @@
 </script>
 
 <style>
-  .CodeMirror,
-  .CodeMirror pre {
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace!important;
-    padding: 0 20px !important; /* Horizontal padding of content */
+  .CodeMirror-code {
+    line-height: 1.6em;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   }
 </style>