JSPM

Introduction

The plug-in is based on Codemirror 5 and only supports Vue 3. In addition to the modes supported by codemirror, this plugin also supports custom log modes.

For complete documentation and more cases, please check codemirror-editor-vue3-docs.(Currently only Chinese version, English version is under planning)

Install

npm install codemirror-editor-vue3 -S

yarn add codemirror-editor-vue3

pnpm i codemirror-editor-vue3 codemirror -S

Use in the global

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 { GlobalCmComponent } from "codemirror-editor-vue3";

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

custom component name:

app.use(GlobalCmComponent, { 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";

// language
import "codemirror/mode/javascript/javascript.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
        lineNumbers: true, // Show line number
        smartIndent: true, // Smart indent
        indentUnit: 2, // The smart indent unit is 2 spaces in length
        foldGutter: true, // Code folding
        styleActiveLine: true, // Display the style of the selected row
      },
    };
  },
};
</script>

Get codemirror instance object

View code

use Codemirror Static property

import { CodeMirror } from "codemirror-editor-vue3";
CodeMirror.Pos(0, 5);

or:

import _CodeMirror from "codemirror";
_CodeMirror.Pos(0, 5);

Other instructions

The codemirror basic style has been introduced inside the codemirror-editor-vue3 plugin, and there is no need to repeatedly introduce the following styles when using:

// base style
import "codemirror/lib/codemirror.css";
import "codemirror/mode/css/css.js";