vue-codemirror

WebJar for vue-codemirror

License

License

MIT
Categories

Categories

Mirror Application Layer Libs Introspection
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

vue-codemirror
Last Version

Last Version

4.0.6
Release Date

Release Date

Type

Type

jar
Description

Description

vue-codemirror
WebJar for vue-codemirror
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/surmon-china/vue-codemirror

Download vue-codemirror

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-codemirror/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-codemirror</artifactId>
    <version>4.0.6</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/vue-codemirror/
implementation 'org.webjars.npm:vue-codemirror:4.0.6'
// https://jarcasting.com/artifacts/org.webjars.npm/vue-codemirror/
implementation ("org.webjars.npm:vue-codemirror:4.0.6")
'org.webjars.npm:vue-codemirror:jar:4.0.6'
<dependency org="org.webjars.npm" name="vue-codemirror" rev="4.0.6">
  <artifact name="vue-codemirror" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='vue-codemirror', version='4.0.6')
)
libraryDependencies += "org.webjars.npm" % "vue-codemirror" % "4.0.6"
[org.webjars.npm/vue-codemirror "4.0.6"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : codemirror jar [5.41.0,6)
org.webjars.npm : diff-match-patch jar [1.0.0,2)

Project Modules

There are no modules declared in this project.

GitHub stars Build Status GitHub issues GitHub forks GitHub last commit license

NPM NPM

vue-codemirror

CodeMirror component for Vue.

基于 CodeMirror,适用于 Vue 的 Web 代码编辑器。

Example

Events

To make it easier to handle events, the component converts some codemirror built-in native events into a single vue component event, where you can listen for events from both the component itself and from codemirror. If you need to listen for more and more complex events, you can pass in the event names (Array) you need for the global Vue.use(, { events: [] }) and the component parameters :events, respectively, or by the this.codemirror.on(event, hanger) method of the codemirror instance. Here's a list of events:

codemirror event list:

  • scroll
  • changes
  • beforeChange
  • cursorActivity
  • keyHandled
  • inputRead
  • electricInput
  • beforeSelectionChange
  • viewportChange
  • swapDoc
  • gutterClick
  • gutterContextMenu
  • focus
  • blur
  • refresh
  • optionChange
  • scrollCursorIntoView
  • update

component event list:

  • ready
  • input

Install

NPM

npm install vue-codemirror --save

# or
yarn add vue-codemirror

CDN

<link rel="stylesheet" href="path/to/codemirror/lib/codemirror.css">
<script type="text/javascript" src="path/to/codemirror.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-codemirror.js"></script>
<script type="text/javascript" src="path/to/codemirror/{some-resources}"></script>
<script type="text/javascript">
  Vue.use(window.VueCodemirror)
</script>

Mount

mount with global

import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'

// import base style
import 'codemirror/lib/codemirror.css'

// import more codemirror resource...

// you can set default global options and events when Vue.use
Vue.use(VueCodemirror, /* {
  options: { theme: 'base16-dark', ... },
  events: ['scroll', ...]
} */)

mount with component

import { codemirror } from 'vue-codemirror'

// import base style
import 'codemirror/lib/codemirror.css'

// import more codemirror resource...

export default {
  components: {
    codemirror
  }
}

Component

<template>
  <!-- Two-way Data-Binding -->
  <codemirror v-model="code" :options="cmOptions" />

  <!-- Or manually control the data synchronization -->
  <codemirror
    ref="cmEditor"
    :value="code"
    :options="cmOptions"
    @ready="onCmReady"
    @focus="onCmFocus"
    @input="onCmCodeChange"
  />

  <!-- Nuxt.js -->
  <client-only placeholder="Codemirror Loading...">
    <codemirror
      ref="cmEditor"
      :value="code" 
      :options="cmOptions"
      @ready="onCmReady"
      @focus="onCmFocus"
      @input="onCmCodeChange"
    />
  </client-only>
</template>

<script>
// import language js
import 'codemirror/mode/javascript/javascript.js'

// import theme style
import 'codemirror/theme/base16-dark.css'

// import more 'codemirror/some-resource...'

export default {
  data () {
    return {
      code: 'const a = 10',
      cmOptions: {
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
        // more CodeMirror options...
      }
    }
  },
  methods: {
    onCmReady(cm) {
      console.log('the editor is readied!', cm)
    },
    onCmFocus(cm) {
      console.log('the editor is focused!', cm)
    },
    onCmCodeChange(newCode) {
      console.log('this is new code', newCode)
      this.code = newCode
    }
  },
  computed: {
    codemirror() {
      return this.$refs.cmEditor.codemirror
    }
  },
  mounted() {
    console.log('the current CodeMirror instance object:', this.codemirror)
    // you can use this.codemirror to do something...
  }
}
</script>

CodeMirror Merge

<template>
  <codemirror :merge="true" :options="cmOption" @scroll="onCmScroll" />
</template>

<script>
  // merge js
  import 'codemirror/addon/merge/merge.js'
  
  // merge css
  import 'codemirror/addon/merge/merge.css'
  
  // google DiffMatchPatch
  import DiffMatchPatch from 'diff-match-patch'
  
  // DiffMatchPatch config with global
  window.diff_match_patch = DiffMatchPatch
  window.DIFF_DELETE = -1
  window.DIFF_INSERT = 1
  window.DIFF_EQUAL = 0
  
  export default {
    data() {
      return {
        cmOption: {
          value: '<p>hello</p>',
          origLeft: null,
          orig: '<p>hello world</p>',
          connect: 'align',
          mode: 'text/html',
          lineNumbers: true,
          collapseIdentical: false,
          highlightDifferences: true
        }
      }
    },
    methods: {
      onCmScroll() {
        console.log('onCmScroll')
      }
    }
  }
</script>

Defined CodeMirror mode

import CodeMirror from 'codemirror'
CodeMirror.defineMode('mymode', () => {
  return {
    token(stream, state) {
      if (stream.match("const")) {
        return "style1"
      } else if (stream.match("bbb")) {
        return "style2"
      } else {
        stream.next()
        return null
      }
    }
  }
})

// Vue app...

CodeMirror language mode types

Codemirror language mode have string | object types.

// MIME types
mode: 'text/javascript'

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

// ext
mode: {
  ext: 'js'
}

// mime
mode: {
  mime: 'text/javascript'
}

// filename
mode: {
  filename: 'index.js'
}

CodeMirror

Versions

Version
4.0.6