• Stars
    star
    3,217
  • Rank 13,956 (Top 0.3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

@codemirror code editor component for @vuejs

vue-codemirror

vue   npm   GitHub stars   Test Codecov   license

CodeMirror(6) component for Vue(3).

vue-codemirror v5/v6 has been released. This is a new version based on CodeMirror@6 and is available to Vue3 only. Since CodeMirror@6 is developed with native ES Modules, the new version will no longer support direct browser references to UMD modules. In short, the new version is ⚠️ completely NOT compatible with previous versions. If you wish to continue using Vue2 or a lower version of CodeMirror, please refer to the legacy versions below.

This example site contains most of what you want.

Legacy version


Documentation

CodeMirror packages


Usage

Install

yarn add codemirror vue-codemirror
npm install codemirror vue-codemirror --save

Depending on your actual needs, you may need to install more CodeMirror packages

# CodeMirror languages...
yarn add @codemirror/lang-html
yarn add @codemirror/lang-json
yarn add @codemirror/lang-javascript

# CodeMirror themes...
yarn add @codemirror/theme-one-dark

# more CodeMirror packages...

If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your package.json

e.g.

"dependencies": {
  "@codemirror/state": "6.x"
}
import { EditorState } from '@codemirror/state'

Local component

<template>
  <codemirror
    v-model="code"
    placeholder="Code goes here..."
    :style="{ height: '400px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    @ready="handleReady"
    @change="log('change', $event)"
    @focus="log('focus', $event)"
    @blur="log('blur', $event)"
  />
</template>

<script>
  import { defineComponent, ref, shallowRef } from 'vue'
  import { Codemirror } from 'vue-codemirror'
  import { javascript } from '@codemirror/lang-javascript'
  import { oneDark } from '@codemirror/theme-one-dark'

  export default defineComponent({
    components: {
      Codemirror
    },
    setup() {
      const code = ref(`console.log('Hello, world!')`)
      const extensions = [javascript(), oneDark]

      // Codemirror EditorView instance ref
      const view = shallowRef()
      const handleReady = (payload) => {
        view.value = payload.view
      }

      // Status is available at all times via Codemirror EditorView
      const getCodemirrorStates = () => {
        const state = view.value.state
        const ranges = state.selection.ranges
        const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
        const cursor = ranges[0].anchor
        const length = state.doc.length
        const lines = state.doc.lines
        // more state info ...
        // return ...
      }

      return {
        code,
        extensions,
        handleReady,
        log: console.log
      }
    }
  })
</script>

Global component

import { createApp } from 'vue'
import { basicSetup } from 'codemirror'
import VueCodemirror from 'vue-codemirror'

const app = createApp()

app.use(VueCodemirror, {
  // optional default global options
  autofocus: true,
  disabled: false,
  indentWithTab: true,
  tabSize: 2,
  placeholder: 'Code goes here...',
  extensions: [basicSetup]
  // ...
})

Component Props

prop description type default
modelValue The input values accepted by the component also support two-way binding. String ''
autofocus Focus editor immediately after mounted. Boolean false
disabled Disable input behavior and disable change state. Boolean false
indentWithTab Bind keyboard Tab key event. Boolean true
tabSize Specify the indent when the Tab key is pressed. Number 2
placeholder Display when empty. String ''
style The CSS style object that acts on the CodeMirror itself. Object {}
phrases Codemirror internationalization phrases. Object {}
autoDestroy Auto destroy the CodeMirror instance before the component unmount. Boolean true
extensions Passed to CodeMirror EditorState.create({ extensions }) Extension []
selection Passed to CodeMirror EditorState.create({ selection }) EditorSelection -
root Passed to CodeMirror new EditorView({ root }) ShadowRoot | Document -

Component Events

event description params
update:modelValue Only when the CodeMirror content (doc) has changed. (value: string, viewUpdate: ViewUpdate)
change ditto ditto
update When any state of CodeMirror changes. (viewUpdate: ViewUpdate)
focus When CodeMirror focused. (viewUpdate: ViewUpdate)
blur When CodeMirror blurred. (viewUpdate: ViewUpdate)
ready When editor component mounted. (payload: { view: EditorView; state: EditorState; container: HTMLDivElement })

Basic Setup

The basic-setup extension is integrated by default in the vue-codemirror configuration and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.

app.use(VueCodemirror, {
  // keep the global default extensions empty
  extensions: []
})

Changelog

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.

More Repositories

1

vue-awesome-swiper

🏆 Swiper component for @vuejs
JavaScript
12,800
star
2

vue-quill-editor

@quilljs editor component for @vuejs(2)
JavaScript
7,368
star
3

videojs-player

@videojs player component for @vuejs(3) and React.
TypeScript
5,203
star
4

surmon.me

🌱 My digital garden, powered by myself.
Vue
2,091
star
5

nodepress

🟢 RESTful API service for https://surmon.me blog, powered by @nestjs
TypeScript
1,422
star
6

surmon.me.native

📱 My blog app, powered by react-native
TypeScript
620
star
7

vue-touch-ripple

A ink-ripple effect component for @vuejs
TypeScript
480
star
8

angular-admin

🔏 Admin client for surmon.me blog powered by @angular and Bootstrap4
TypeScript
354
star
9

simple-netease-cloud-music

🎵 A simple netease music api lib. 简单、统一、轻巧的 Node.js 版网易云音乐 API
TypeScript
272
star
10

ngx-quill-editor

🍡@quilljs editor component for @angular
TypeScript
232
star
11

surmon-china.github.io

My GitHub repositories homepage.
Vue
221
star
12

naivebayes

NaiveBayes classifier for JavaScript
JavaScript
142
star
13

vue-drag-zone

Drag Zone component for @vuejs
JavaScript
129
star
14

surmon.admin

🔏 Admin client for surmon.me blog, powered by React & @veactjs
TypeScript
61
star
15

mongodb-data-api

MongoDB Atlas Data API SDK for @nodejs
TypeScript
40
star
16

emoji-233333

😂 2333333
JavaScript
38
star
17

sre.surmon.me

💻 SRE service for Surmon.me blog.
HTML
34
star
18

vue2any

把 vue 组件转换为任何 web 类模板
JavaScript
33
star
19

wonderful-bing-wallpaper

🌅 Simple bing daily wallpaper API lib for Node.js.
TypeScript
31
star
20

vuniversal

[WIP] Create vue (3) universal web applications quickly by @vitejs.
TypeScript
19
star
21

surmon-china

About me
JavaScript
16
star
22

wordpress-theme-one

🎨 A blog theme for @wordpress
CSS
16
star
23

libundler

📦 Universal JavaScript library bundler, powered by @rollup.
TypeScript
14
star
24

developer-code-guide

🗒Developer code guide.
12
star
25

README.vue

Design your README.md by @vuejs component.
Vue
11
star
26

wordpress-theme-surmon

🎨 A blog theme for @wordpress
PHP
10
star
27

surmon.me.flutter

📱 My blog app powered by @flutter (The repositorie has been deprecated)
Dart
9
star
28

wordpress-theme-metro

🎨 A blog theme for @wordpress
PHP
9
star
29

javascript-gobang

⚫Javascript gobang game
HTML
9
star
30

nurse.js

My lib.
JavaScript
9
star
31

jquery-dragZone

jQuery 拖拽改变div大小效果
HTML
7
star
32

better-itg-flat-dark-vscode-theme

Better itg.flat.dark theme for vscode. Base on Sublime Text
7
star
33

wordpress-theme-think

🎨 A cms theme for @wordpress
PHP
7
star
34

coolcut

cool cut psd file
JavaScript
5
star
35

chrome-tmall-rate-thumb-extend

⚾️ 增加在天猫商品评价页显示原图及图片旋转操作功能
JavaScript
5
star
36

action-ssl-cert-expiry-checker

Check SSL certificate expiry time for your domains
JavaScript
3
star
37

ifttt

IFTTT SPACE
1
star
38

.github

GitHub
1
star