# vue-codemirror-editor

**Repository Path**: martsforever/vue-codemirror-editor

## Basic Information

- **Project Name**: vue-codemirror-editor
- **Description**: 基于Vue以及Codemirror的代码编辑器组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2019-09-20
- **Last Updated**: 2025-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue-Codemirror-Editor

A vue component base on codemirror

一个基于Vue以及Codemirror的代码编辑器

[Github Page](https://martsforever.github.io/vue-codemirror-editor/)

# Install

```
npm i vue-codemirror-editor -S
```

# Basic Usage

```javascript
import Vue from 'vue'

/*must import CodeMirror before import App.vue, because you have to import codemirror.js before modes or addons such as merge.js*/
import VueCodemirrorEditor from 'vue-codemirror-editor'
import CodeMirror from 'codemirror'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/addon/selection/active-line.js'

import 'codemirror/lib/codemirror.css'
import 'vue-codemirror-editor/dist/vue-codemirror-editor.css'

import App from './App.vue'

window.CodeMirror = CodeMirror
Vue.component(VueCodemirrorEditor.name, VueCodemirrorEditor)

new Vue({
    render: h => h(App),
}).$mount('#app')

```

# More Example

[Github Page](https://martsforever.github.io/vue-codemirror-editor/)

[Asynchronous Initialization And Code Split](https://github.com/martSforever/vue-codemirror-editor/blob/master/example/demo/demo7-async-initialized.vue)