2.8.0 • Published 3 months ago

codemirror-editor-vue3 v2.8.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

GitHub stars npm downloads GitHub issues GitHub forks GitHub last commit license

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

npm install codemirror-editor-vue3 codemirror@^5 -S
yarn add codemirror-editor-vue3 codemirror@">=5.64.0 <6"
pnpm i codemirror-editor-vue3 codemirror@^5 -S

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

npm 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:

import { createApp } from "vue";
import App from "./App.vue";
import { InstallCodeMirror } from "codemirror-editor-vue3";

const app = createApp(App);
app.use(InstallCodeMirror);
app.mount("#app");

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

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

Use in components

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="test placeholder"
    :height="200"
    @change="change"
  />
</template>

<script>
import Codemirror from "codemirror-editor-vue3";

// placeholder
import "codemirror/addon/display/placeholder.js";

// language
import "codemirror/mode/javascript/javascript.js";
// placeholder
import "codemirror/addon/display/placeholder.js";
// theme
import "codemirror/theme/dracula.css";

import { ref } from "vue";
export default {
  components: { Codemirror },
  setup() {
    const code = ref(`
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
}`);

    return {
      code,
      cmOptions: {
        mode: "text/javascript", // Language mode
        theme: "dracula", // Theme
      },
    };
  },
};
</script>

Language highlighting

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

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

Component Props

namedescriptiontypedefault
value(v-model)Editor contentstring""
optionsConfiguration options of codemirror5EditorConfigurationDEFAULT_OPTIONS
placeholderEditor placeholder content to introduce codemirror related filesstring""
borderWhether to display editor bordersbooleanfalse
widthwidthstring100%
heightheightstring100%
original-styleUsing the original style, disable the second modification of the style for this component (but does not affect width, height, and border)booleanfalse
KeepCursorInEndAlways keep the mouse position on the last linebooleanfalse
mergemerge mode, can also be used as diff patternbooleanfalse

Events

Component Events

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

event namedescriptionparams
changevalue or instance changes(value: string, cm: Editor) => void
inputinput(value: string) => void
readyThe 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:

<Codemirror
  v-model:value="code"
  :options="{ mode: 'text/x-vue', theme: 'default' }"
  border
  placeholder="test-placeholder"
  :height="200"
  @change="onChange"
  @blur="onBlur"
  @focus="onFocus"
  @scroll="onScroll"
/>

All event names are as follows:

  • changes
  • scroll
  • beforeChange
  • cursorActivity
  • keyHandled
  • inputRead
  • electricInput
  • beforeSelectionChange
  • viewportChange
  • swapDoc
  • gutterClick
  • gutterContextMenu
  • focus
  • blur
  • refresh
  • optionChange
  • scrollCursorIntoView
  • update
2.8.0-beta.0

3 months ago

2.8.0

3 months ago

2.7.1

4 months ago

2.7.0

6 months ago

2.6.1

6 months ago

2.6.0-beta.0

7 months ago

2.6.0-beta.1

7 months ago

2.6.0

7 months ago

2.5.8

9 months ago

2.5.0-beta.7

9 months ago

2.5.0-beta.6

9 months ago

2.5.0-beta.2

9 months ago

2.5.0-beta.3

9 months ago

2.5.0-beta.4

9 months ago

2.5.0-beta.5

9 months ago

2.5.0-beta.1

9 months ago

2.4.1

1 year ago

2.4.0

1 year ago

2.3.1

1 year ago

2.4.0-beta.0

1 year ago

2.4.0-beta.1

1 year ago

2.3.0-beta.1

2 years ago

2.3.0

2 years ago

2.3.0-beta1

2 years ago

2.3.0-beta2

2 years ago

2.2.2

2 years ago

2.2.0

2 years ago

2.1.9-beta1

2 years ago

2.1.8

2 years ago

2.1.1-beta

3 years ago

2.1.2

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.6

3 years ago

2.1.0-beta

3 years ago

2.1.5

3 years ago

2.1.7

3 years ago

2.0.3

3 years ago

2.0.3-beta

3 years ago

2.0.2

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.6

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

2.0.0-beta.11

3 years ago

2.0.0-beta.10

3 years ago

2.0.3-beta1

3 years ago

2.0.0-rc

3 years ago

2.0.0-beta.9

3 years ago

2.0.0-beta.8

3 years ago

2.0.4-beta

3 years ago

2.0.0-beta.7

3 years ago

2.0.0-beta.2

3 years ago

2.0.0-beta.1

3 years ago

2.0.4-beta1

3 years ago

2.0.0-beta.6

3 years ago

2.0.0-beta.5

3 years ago

2.0.0-beta.4

3 years ago

2.0.0-beta.3

3 years ago

1.0.1

3 years ago

1.1.0-beta15

3 years ago

1.1.0-beta14

3 years ago

1.1.0-beta13

3 years ago

1.1.0-beta12

3 years ago

1.1.0-beta16

3 years ago

1.1.0-beta11

3 years ago

0.3.0-beta

3 years ago

0.3.5

3 years ago

0.3.4

3 years ago

0.3.3

3 years ago

1.1.0-beta5

3 years ago

1.1.0-beta6

3 years ago

1.1.0-beta3

3 years ago

1.1.0-beta4

3 years ago

1.1.0-beta1

3 years ago

1.1.0-beta2

3 years ago

0.3.1-beta

3 years ago

0.3.4-beta

3 years ago

1.1.0-beta9

3 years ago

1.1.0-beta7

3 years ago

1.1.0-beta8

3 years ago

1.2.0-beta-2

3 years ago

1.2.0-beta-1

3 years ago

1.1.0-beta

3 years ago

1.2.0-beta-3

3 years ago

0.3.2-beta

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.2.2

3 years ago

0.1.0-beta

3 years ago

0.1.3

3 years ago

0.0.18-beta

3 years ago

0.0.15-beta

3 years ago

0.0.17-beta

3 years ago

0.0.16-beta

3 years ago

0.0.8-beta

3 years ago

0.1.3-beta

3 years ago

0.0.6-beta

3 years ago

0.0.11-beta

3 years ago

0.0.9-beta

3 years ago

0.1.2

3 years ago

0.0.14-beta

3 years ago

0.0.12-beta

3 years ago

0.0.4-beta

3 years ago

0.1.4-beta

3 years ago

0.0.7-beta

3 years ago

0.0.5-beta

3 years ago

0.0.10-beta

3 years ago

0.0.13-beta

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago

0.1.0-beat

3 years ago