https://github.com/cnu4/vue-codemirror-lite

Lightweight Codemirror Component for Vue.js
https://github.com/cnu4/vue-codemirror-lite

codemirror javascript vue

Last synced: 16 days ago
JSON representation

Lightweight Codemirror Component for Vue.js

• Host: GitHub
• URL: https://github.com/cnu4/vue-codemirror-lite
• Owner: cnu4
• License: mit
• Created: 2017-01-13T09:28:55.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-07-27T06:26:34.000Z (over 3 years ago)
• Last Synced: 2024-10-11T09:26:25.255Z (about 1 month ago)
• Topics: codemirror, javascript, vue
• Language: Vue
• Homepage: https://cnu4.github.io/vue-codemirror-lite/
• Size: 265 KB
• Stars: 280
• Watchers: 9
• Forks: 48
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue-Codemirror-Lite

[CodeMirror](http://codemirror.net/) Component For Vue.js (support 1.x and 2.x).

[中文文档](https://github.com/cnu4/vue-codemirror-lite/blob/master/README_CN.md)

## Lightweight

By default (to optimise bundle size) all modes and addons are not included. To enable them, see [Using Language Modes and Addons](#using-language-modes-and-addons).

## Demo

Live Demo: [https://cnu4.github.io/vue-codemirror-lite](https://cnu4.github.io/vue-codemirror-lite)

To run the demo locally, run

`npm install && npm run dev`

View demo in browser on [JSFiddle](https://jsfiddle.net/cnu4/r33vk618)

## Installation

### npm

`npm install vue-codemirror-lite`

```js

// Install the plugin

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

  }

}

```

### browser

Include in the page

``

install into vue

`Vue.use(VueCodeMirror)`

or use as components

`Vue.component('codemirror', VueCodeMirror.codemirror)`

CodeMirror itself was built into `vuecodemirror.min.js`, get `CodeMirror` by

`window.CodeMirror = VueCodeMirror.CodeMirror`

View demo in browser on [JSFiddle](https://jsfiddle.net/cnu4/r33vk618)

## Usage

### Usage in Component

```html

```

```js

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` the editor value

 - `options` `Object (newValue)` options passed to the CodeMirror instance

See the [CodeMirror Configuration](http://codemirror.net/doc/manual.html#config) for the available options.

## Using Language Modes and Addons

Several [language modes](https://codemirror.net/mode/) are included with CodeMirror.

By default (to optimise bundle size) all modes and addons are not included. To enable:

 - install `vue-codemirror-lite` 

 - require the language modes or addons after you require `vue-codemirror-lite` itself (If use browser version, you need to include necessary script file of mode and addons. View demo in browser on [JSFiddle](https://jsfiddle.net/cnu4/r33vk618))

 - set the mode option in the options object

```html

  

  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 {

    ...

  }

```

See the demo source which implement JavaScript and vue syntax highlighting and JavaScript hint addon.

See the [CodeMirror Manual](http://codemirror.net/doc/manual.html) for the more modes and addons.

## License

MIT