V-codemirror NPM

Quick Start

If you use webpack, you need install css-loader and style-loader first:

npm install --save-dev css-loader style-loader

And add config in your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

If you want to register V-Codemirror as a global component, you can use:

  import VCodemirror from 'v-codemirror' // default export is the install function
  Vue.use(VCodemirror)

Or If you don't want to pollute the global scope, you can register it when you want to use it:

  import {VCodemirror} from 'v-codemirror' // VCodemirror is a property in export object
  export default {
    name: 'app',
    components: {
      'V-Codemirror': VCodemirror
    }
  }

A simple usage example as follows:

<template>
  <div class="simple-editor">
    <div class="editor">
      <V-Codemirror v-model="code" :options="editorOpts"></V-Codemirror>
    </div>
    <div class="preview">
      <pre v-html="code"></pre>
    </div>
  </div>
</template>

<script>
  import VCodemirror from 'v-codemirror'

  export default {
    components: {
      'V-Codemirror': VCodemirror
    },
    data () {
      return {
        code: '<h1>V-Codemirror</h1>',
        editorOpts: {
          mode: 'text/html'
        },
      }
    }
  }
</script>

API

props

Name	Required	Type	Description	Default
`v-model`	N	String	Code string value, It will work on two-way data binding, so you needn't watch the code value's change	-
`value`	N	String	Code string value, If you use `value` mode, you need to watch the value's change manually	-
`options`	N	Object	Editor config, please move to codemirror-config to get detailed configuration list	`{tabSize: 2, mode: 'text/javascript', theme: 'monokai'}`