Vue-Codemirror-Lite

CodeMirror Component For Vue.js (support 1.x and 2.x).

中文文档

Lightweight

By default (to optimise bundle size) all modes and addons are not included. To enable them, see Using Language Modes and Addons.

Demo

Live Demo: https://cnu4.github.io/vue-codemirror-lite

To run the demo locally, run

npm install && npm run dev

View demo in browser on JSFiddle

Installation

npm

npm install vue-codemirror-lite

1// Install the plugin
2var Vue = require('vue')
3var VueCodeMirror = require('vue-codemirror-lite')
4
5Vue.use(VueCodeMirror)
6
7// Or use as component (ES6)
8import Vue from 'vue'
9import { codemirror } from 'vue-codemirror-lite'
10
11export default {
12  components: {
13    codemirror
14  }
15}

browser

Include in the page

<script src="https://unpkg.com/vue-codemirror-lite/dist/vuecodemirror.min.js"></script>

install into vue

Vue.use(VueCodeMirror)

or use as components

Vue.component('codemirror', VueCodeMirror.codemirror)

CodeMirror itself was built into vuecodemirror.min.js, get CodeMirror by

window.CodeMirror = VueCodeMirror.CodeMirror

View demo in browser on JSFiddle

Usage

Usage in Component

1
2<!-- simple -->
3<codemirror :value="code"></codemirror>
4
5<!-- simple (with bindings in Vue1.x) -->
6<codemirror :value.sync="code"></codemirror>
7
8<!-- simple (with bindings in Vue2.x) -->
9<codemirror v-model="code"></codemirror>
10
11<!-- advanced -->
12<codemirror
13  :value="code"
14  :options="editorOption"
15  ref="myEditor"
16  @change="yourCodeChangeMethod">
17</codemirror>

1export default {
2  data () {
3    return {
4      code: 'const str = "hello world"'
5    }
6  },
7  computed: {
8    editor() {
9      // get current editor object
10      return this.$refs.myEditor.editor
11    }
12  },
13  mounted() {
14    // use editor object...
15    this.editor.focus()
16    console.log('this is current editor object', this.editor)
17  }
18}

Properties

• value String the editor value
• options Object (newValue) options passed to the CodeMirror instance

See the CodeMirror Configuration for the available options.

Using Language Modes and Addons

Several language modes are included with CodeMirror.

By default (to optimise bundle size) all modes and addons are not included. To enable:

• install vue-codemirror-lite
• require the language modes or addons after you require vue-codemirror-lite itself (If use browser version, you need to include necessary script file of mode and addons. View demo in browser on JSFiddle)
• set the mode option in the options object

1<template>
2  <codemirror :options="{
3    mode: 'javascript',
4    extraKeys: {'Ctrl-Space': 'autocomplete'}
5  }"></codemirror>
6</template>
7
8<script>
9  import { codemirror } from 'vue-codemirror-lite'
10  require('codemirror/mode/javascript/javascript')
11  require('codemirror/mode/vue/vue')
12
13  require('codemirror/addon/hint/show-hint.js')
14  require('codemirror/addon/hint/show-hint.css')
15  require('codemirror/addon/hint/javascript-hint.js')
16
17  export default {
18    ...
19  }
20</script>

See the demo source which implement JavaScript and vue syntax highlighting and JavaScript hint addon.

See the CodeMirror Manual for the more modes and addons.

License

MIT