vue-code-mirror 的使用

import Vue from 'vue'
import vueQuillEditor from 'vue-quill-editor'
import vueCodeMirror from 'vue-codemirror-lite'
import App from './App.vue'
import router from './router'

import '@/assets/css/common.css'
import '@/assets/css/animate.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.config.productionTip = false
Vue.use(vueQuillEditor)
Vue.use(vueCodeMirror)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

<template>
  <div class="code-editor">
    <codemirror
      :value="code"
      :options="editorOption"
      ref="codeEditor">
    </codemirror>
  </div>
</template>

<script>
require('codemirror/mode/css/css')
require('codemirror/theme/ambiance.css')

export default {
  name: 'coder',
  data () {
    return {
      code: '#a { color: #ddd; }',
      editorOption: {
        mode: 'css',
        theme: 'ambiance',
        extraKeys: {
          'Ctrl-Space': 'autocomplete'
        }
      }
    }
  },
  computed: {
    editor() {
      return this.$refs.codeEditor.editor
    }
  },
  mounted() {
    this.editor.focus()
  }
}
</script>

<style scoped>

</style>