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

Installation

npm install vue-codemirror-lite

Usage

1// Require in Webpack
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 {
12components: {
13codemirror
14}
15}

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"
15ref="myEditor"
16@change="yourCodeChangeMethod">
17</codemirror>

1export default {
2data () {
3return {
4code: 'const str = "hello world"'
5}
6},
7computed: {
8editor() {
9// get current editor object
10return this.$refs.myEditor.editor
11}
12},
13mounted() {
14// use editor object...
15this.editor.focus()
16console.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
• set the mode option in the options object

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