在 GamiLMS 裡前端的部分，讓學生在線上學習用的編輯器是使用 Codemirror，
如何整合 Codemirror 到 Vue 中，我們使用 Vue-Codemirror

建立 Component

<template>
   <codemirror v-model="code" :options="cmOptions"></codemirror>
</template>

<script>
  // require component
  import { codemirror } from 'vue-codemirror'

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

  // language js
  import 'codemirror/mode/javascript/javascript.js'

  // theme css
  import 'codemirror/theme/monokai.css'

  export default {
    name: 'Editor',
    props: ['code'],
    components: {
      codemirror
    },
    data () {
      return {
        cmOptions: {
          // codemirror options
          tabSize: 4,
          mode: 'text/javascript',
          theme: 'monokai',
          lineNumbers: true,
          line: true,
        }
      }
    }
  }
</script>

運用 Component

<template>
  <div id="app">
    <Editor :code="codeValue"/>
  </div>
</template>

<script>
import Editor from './components/Editor.vue'

export default {
  name: 'app',
  data: function(){
    return {
      codeValue: `var a = 10;`
    };
  },
  components: {
    Editor
  }
}
</script>