Introduction

简体中文

The codemirror component of vue3. This component is developed based on Codemirror 5 and only vue3 is supported.

In addition to the officially supported modes, the log output presentation mode is added, out of the box, but not necessarily suitable for all scenarios.

For complete documentation and more cases, please check codemirror-editor-vue3 docs.

Install

1npm install codemirror-editor-vue3 codemirror@^5 -S

1yarn add codemirror-editor-vue3 codemirror@">=5.64.0 <6"

1pnpm i codemirror-editor-vue3 codemirror@^5 -S

If your project requires Typescript support, you will also need to install the '@types/codemirror' dependency.

1npm install @types/codemirror -D

Register global component

Do not recommend global registration components, which will result in the type of prompt on the template that cannot be properly obtained.

main.js:

1import { createApp } from "vue";
2import App from "./App.vue";
3import { InstallCodeMirror } from "codemirror-editor-vue3";
4
5const app = createApp(App);
6app.use(InstallCodeMirror);
7app.mount("#app");

The global registered component name is Codemirror or you can customize a component name, for example:

1app.use(InstallCodeMirror, { componentName: "customName" });

Use in components

1<template>
2  <Codemirror
3    v-model:value="code"
4    :options="cmOptions"
5    border
6    placeholder="test placeholder"
7    :height="200"
8    @change="change"
9  />
10</template>
11
12<script>
13import Codemirror from "codemirror-editor-vue3";
14
15// placeholder
16import "codemirror/addon/display/placeholder.js";
17
18// language
19import "codemirror/mode/javascript/javascript.js";
20// placeholder
21import "codemirror/addon/display/placeholder.js";
22// theme
23import "codemirror/theme/dracula.css";
24
25import { ref } from "vue";
26export default {
27  components: { Codemirror },
28  setup() {
29    const code = ref(`
30var i = 0;
31for (; i < 9; i++) {
32  console.log(i);
33  // more statements
34}`);
35
36    return {
37      code,
38      cmOptions: {
39        mode: "text/javascript", // Language mode
40        theme: "dracula", // Theme
41      },
42    };
43  },
44};
45</script>

Language highlighting

You can click on the following link to view corresponding language cases

• javascript
• json
• css
• html
• apl
• yaml

More cases are gradually being added, and you can also refer to document to achieve more language modes.

Component Props

name	description	type	default
value(v-model)	Editor content	string	""
options	Configuration options of codemirror5	EditorConfiguration	DEFAULT_OPTIONS
placeholder	Editor placeholder content to introduce codemirror related files	string	""
border	Whether to display editor borders	boolean	false
width	width	string	100%
height	height	string	100%
original-style	Using the original style, disable the second modification of the style for this component (but does not affect width, height, and border)	boolean	false
KeepCursorInEnd	Always keep the mouse position on the last line	boolean	false
merge	merge mode, can also be used as diff pattern	boolean	false

Events

Component Events

The following three are only the events encapsulated by this component. Please refer to more events Codemirror Events

event name	description	params
change	value or instance changes	(value: string, cm: Editor) => void
input	input	(value: string) => void
ready	The Codemirror component is mounted	(cm: Editor) => void;

---

Codemirror Events

The following events are official events of Codemirror5. You can refer to the official documents for details Codemirror Event，You can use this component to bind events directly through components, for example：

1<Codemirror
2  v-model:value="code"
3  :options="{ mode: 'text/x-vue', theme: 'default' }"
4  border
5  placeholder="test-placeholder"
6  :height="200"
7  @change="onChange"
8  @blur="onBlur"
9  @focus="onFocus"
10  @scroll="onScroll"
11/>

All event names are as follows：

• changes
• scroll
• beforeChange
• cursorActivity
• keyHandled
• inputRead
• electricInput
• beforeSelectionChange
• viewportChange
• swapDoc
• gutterClick
• gutterContextMenu
• focus
• blur
• refresh
• optionChange
• scrollCursorIntoView
• update