vue-cm v1.1.0

vue-cm

NOTE: I'm aware of the existence of vue-codemirror, but I built this one for good reasons:

• Smaller.
• No unnecessary abstractions, which means simpler API.
• Prebuilt bundle, you can use it with or without a bundler.
• More modern-ish.

Install

yarn add codemirror vue-cm

CDN: UNPKG | jsDelivr

NOTE: You need to include CodeMirror as well if you're using the CDN version, basically we access it via window.CodeMirror in the CDN version.

Usage

<template>
  <code-mirror 
    v-model="code"
    :options="options">
  </code-mirror>
</template>

<script>
import CodeMirror from 'vue-cm'

// Using language mode
import 'codemirror/mode/javascript/javascript'

export default {
  component: {
    CodeMirror
  },

  data() {
    return { 
      code: '',
      options: {
        mode: 'javascript'
      }
    }
  }
}
</script>

<style src="codemirror/lib/codemirror.css"></style>

v-model for components is just a syntax sugar of:

<code-mirror 
-  v-model="code"
+  :value="code"
+  @change="newValue => { code = newValue }"
  :options="options">
</code-mirror>

Props

• value: string Editor value
• options: object CodeMirror instance options
• preserveScrollPosition default: false: Preserve previous scroll position after updating value.

Events

• change: Emitted when a change is made, args:
  • newValue: New editor value
• focus: Emitted when the editor is focused
• blur: Emitted when the editor loses focus
• scroll: Emitted when the editor is scrolled, args:
  • scrollInfo
• cursorActivity: Emitted when cursor is moved, args:
  • codemirror: CodeMirror instance

Methods

• focus(): focuses the CodeMirror instance
• getCodeMirror(): get the CodeMirror instance

You can interact with the CodeMirror component by using a ref attribute, eg: <code-mirror ref="editor"></code-mirror>, then you can call this.$refs.editor.getCodeMirror() in parent component's mounted hook to get the CodeMirror instance we use in the child component.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vue-cm © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily