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# oryarn add vue-codemirror
CDN
Mount
mount with global
// import base style// import more codemirror resource...// you can set default global options and events when Vue.useVue
mount with component
// import base style // import more codemirror resource... 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 jsimport 'codemirror/mode/javascript/javascript.js' // import theme styleimport '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
CodeMirror // Vue app...
CodeMirror language mode types
Codemirror language mode have string | object types.
// MIME typesmode: 'text/javascript'// namemode:name: 'javascript'json: true// extmode:ext: 'js'// mimemode:mime: 'text/javascript'// filenamemode:filename: 'index.js'
CodeMirror
- CodeMirror language modes (MIME types defined)
- CodeMirror Autoresize
- CodeMirror themes
- CodeMirror events
- CodeMirror APIs