Vue-Codemirror-Lite: 在線代碼編輯器 Codemirror 的輕量級 Vue.js 組件

Vue-Codemirror-Lite

項目地址：https://github.com/cnu4/vue-codemirror-lite

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

Lightweight

爲了減小打包後的體積，全部的語言模式和插件在默認的狀況下沒有加載, 要使用它們,
見 Using Language Modes and Addons.

Demo

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

本地運行實例：

npm install && npm run dev

Installation

npm install vue-codemirror-lite

Usage

// Require in Webpack
var Vue = require('vue')
var VueCodeMirror = require('vue-codemirror-lite')

Vue.use(VueCodeMirror)

// Or use as component (ES6)
import Vue from 'vue'
import { codemirror } from 'vue-codemirror-lite'

export default {
  components: {
    codemirror
  }
}

Usage in component

<!-- simple -->
<codemirror :value="code"></codemirror>

<!-- simple (with bindings in Vue1.x) -->
<codemirror :value.sync="code"></codemirror>

<!-- simple (with bindings in Vue2.x) -->
<codemirror v-model="code"></codemirror>

<!-- advanced -->
<codemirror
  :value="code"
  :options="editorOption"
  ref="myEditor"
  @change="yourCodeChangeMethod">
</codemirror>

export default {
  data () {
    return {
      code: 'const str = "hello world"'
    }
  },
  computed: {
    editor() {
      // get current editor object
      return this.$refs.myEditor.editor
    }
  },
  mounted() {
    // use editor object...
    this.editor.focus()
    console.log('this is current editor object', this.editor)
  }
}

Properties

• value String 編輯器的值

• options Object (newValue) 傳遞給 CodeMirror 實例的配置選項

前往 CodeMirror Configuration 查看更多可用選項

Using Language Modes and Addons

CodeMirror 中包含了許多的語言模式

默認狀況下全部的語言模式和插件在默認的狀況下沒有加載， 啓用它們：

• 安裝 vue-codemirror-lite

• require vue-codemirror-lite 後 require 一個語言模式或者插件

• 在 options 對象中配置 mode 選項

<template>
  <codemirror :options="{
    mode: 'javascript',
    extraKeys: {'Ctrl-Space': 'autocomplete'}
  }"></codemirror>
</template>

<script>
  import { codemirror } from 'vue-codemirror-lite'
  require('codemirror/mode/javascript/javascript')
  require('codemirror/mode/vue/vue')

  require('codemirror/addon/hint/show-hint.js')
  require('codemirror/addon/hint/show-hint.css')
  require('codemirror/addon/hint/javascript-hint.js')

  export default {
    ...
  }
</script>

demo 目錄下的例子實現了 JavaScript 和 vue 語法高亮和 JavaScript 代碼提示

前往 CodeMirror Manual 查看更多的語言模式和插件.

License

MIT