n9ti / vue-codemirror

❤️ Codemirror component for Vue.js(1.x ~ 2.x)

Vue-Codemirror

Codemirror component for Vue.js(1.x ~ 2.x)，本组件基于 Codemirror构建，支持Vue全版本使用，支持100+多种语言、分支语言、语法，支持多种代码高亮theme，并可以自行配置，可使用Vue-Codemirror快速轻易构建出多种丰富全面的web code editor，并以此基础多次开发WebIDE

Example

Demo Page

Use Setup

Install vue-codemirror

npm install vue-codemirror --save

Vue use

// import with ES6
import Vue from 'vue'
// ...
import CodeMirror from 'vue-codemirror'


// require with Webpack/Node.js
var Vue = require('vue')
// ...
var CodeMirror = require('vue-codemirror')


// use
Vue.use(CodeMirror)


// --------------------------------------


// or use with component(ES6)
import Vue from 'vue'
// ...
import { codemirror } from 'vue-codemirror'

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

Use in components

<codemirror></codemirror>


<!-- component data bind and config in Vue.js1.X -->
<codemirror :code="code" :options="editorOption"></codemirror>
<!-- Bidirectional data binding in Vue.js1.X -->
<codemirror :code.sync="code" :options="editorOption"></codemirror>


<!-- component data bind and config in Vue.js2.X -->
<codemirror :code="code" :options="editorOption"></codemirror>
<!-- Bidirectional data binding in Vue.js2.X -->
<codemirror v-model="code" :options="editorOption"></codemirror>
<!-- or -->
<!-- If you need to manually control the data synchronization, you can monitor the code change event like this -->
<codemirror :code="code" :options="editorOption" @changed="codeChange"></codemirror>

// editor option example:
export default {
  data () {
    return {
      code: 'const a = 10',
      editorOption: {
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
        ...
      }
    }
  },
  // If you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
  methods: {
    codeChange(newCode) {
      console.log(newCode)
      this.code = newCode
    }
  }
}

// editorOption mode types:

// string mode
mode: 'text/javascript'

// object mode
mode: {
  name: 'javascript',
  json: true
}

<!-- component config example 2 (Vue.js1.X) -->
<codemirror :code.sync="css" :options="{ tabSize: 2, mode: 'text/css' }"></codemirror>

data () {
  return {
    css: '.class { display: block }'
  }
}

More Config

Code example

Codemirror config APIs

Codemirror themes

Codemirror language modes (MIME types defined)

Author Blog

Surmon