https://github.com/egoist/vue-cm
CodeMirror component for Vue.js
https://github.com/egoist/vue-cm
codemirror component vue
Last synced: about 1 year ago
JSON representation
CodeMirror component for Vue.js
- Host: GitHub
- URL: https://github.com/egoist/vue-cm
- Owner: egoist
- License: mit
- Created: 2017-08-02T15:04:53.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:23:49.000Z (over 4 years ago)
- Last Synced: 2025-04-19T01:32:24.209Z (about 1 year ago)
- Topics: codemirror, component, vue
- Language: JavaScript
- Homepage: https://vue-cm.netlify.com
- Size: 79.1 KB
- Stars: 45
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-cm
[](https://npmjs.com/package/vue-cm) [](https://npmjs.com/package/vue-cm) [](https://circleci.com/gh/egoist/vue-cm/tree/master) [](https://github.com/egoist/donate)
*[CodeMirror](https://codemirror.net/) is a versatile text editor implemented in JavaScript for the browser.*
**NOTE:** I'm aware of the existence of [vue-codemirror](https://github.com/surmon-china/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.
- Simply better.
## Install
```bash
yarn add codemirror vue-cm
```
CDN: [UNPKG](https://unpkg.com/vue-cm/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-cm/dist/)
> **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
```vue
import CodeMirror from 'vue-cm'
// Using language mode
import 'codemirror/mode/javascript/javascript'
export default {
component: {
CodeMirror
},
data() {
return {
code: '',
options: {
mode: 'javascript'
}
}
}
}
```
`v-model` for components is just a syntax sugar of:
```diff
{ code = newValue }"
:options="options">
```
### 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: ``, 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](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-cm/contributors)).
> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)