vue-codemirror code editor

Documentation

https://github.com/surmon-china/vue-codemirror

http://codemirror.net/

https://surmon-china.github.io/vue-codemirror/

 

Install

npm install vue-codemirror --save

 

Can be registered globally or locally

mount with global

// require lib
import View from 'view'
import VueCodemirror from 'vue-codemirror'

// require styles
import 'codemirror/lib/codemirror.css'

// require more codemirror resource...

// you can set default global options and events when use
Vue.use(VueCodemirror, /* {
  options: { theme: 'base16-dark', ... },
  events: ['scroll', ...]
} */)

mount with component

// require component
import { codemirror } from 'vue-codemirror'

// require styles
import 'codemirror/lib/codemirror.css'

// require more codemirror resource...

// component
export default {
  components: {
    codemirror
  }
}

 

 

Simple to use, refer to the case for configuration information, and generally do not need too much configuration. . .

The configuration of the theme needs to import the theme css file, and then set the theme, there is nothing particularly beautiful. . .

 

 

<template>
  <div>
    <codemirror
      style="width: 400px;height: 300px"
      v-model="code"
      :options="cmOptions">
    </codemirror>
  </div>
</template>

<script>
  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/theme/material.css'
  import {codemirror} from 'vue-codemirror'
  import 'codemirror/lib/codemirror.css'

  export default {
    components: {
      codemirror
    },

    data() {
      return {
        code: `var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})`,
        cmOptions: {
          tabSize: 4,
          mode: 'text/javascript',
          theme: 'material',
          lineNumbers: true,
          line: true,
        }
      }
    },

  }
</script>