JarCasting
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:
scrollchangesbeforeChangecursorActivitykeyHandledinputReadelectricInputbeforeSelectionChangeviewportChangeswapDocgutterClickgutterContextMenufocusblurrefreshoptionChangescrollCursorIntoViewupdate
component event list:
readyinput
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
- CodeMirror language modes (MIME types defined)
- CodeMirror Autoresize
- CodeMirror themes
- CodeMirror events
- CodeMirror APIs