This package has been deprecated

Author message:

this package has been deprecated

v-codemirror

A laconic codemirror component for Vue.js

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'}

Property v-model and value are forced alternative.

event

Some useful event are listed:

Event Name	Description	Callback Value
change	Fires every time the content of the editor content is changed.	Current code string

The detailed event list and their docs can refer to codemirror-event