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.

Install

npm

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

yarn

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

pnpm

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

Typescript Support

If your project requires Typescript support, you will also need to install the type dependency.

npm

npm install @types/codemirror -D

yarn

yarn add @types/codemirror

pnpm

pnpm i @types/codemirror -D

Register global component

WARNING

It is not recommended to register components globally. This will cause the type prompt on the template to not be retrieved correctly.

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:

main.js

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

Use in components

This is a commonly used javascript language case.

Specific code is as follows:

index.vue

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script>
import { ref, onMounted, onUnmounted } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
export default {
  components: { Codemirror },
  setup() {
    const code = ref(
      `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
    );

    const cmRef = ref();
    const cmOptions = {
      mode: "text/javascript",
    };
    const onChange = (val, cm) => {
      console.log(val);
      console.log(cm.getValue());
    };

    const onInput = (val) => {
      console.log(val);
    };

    const onReady = (cm) => {
      console.log(cm.focus());
    };

    onMounted(() => {
      setTimeout(() => {
        cmRef.value?.refresh();
      }, 1000);

      setTimeout(() => {
        cmRef.value?.resize(300, 200);
      }, 2000);

      setTimeout(() => {
        cmRef.value?.cminstance.isClean();
      }, 3000);
    });

    onUnmounted(() => {
      cmRef.value?.destroy();
    });

    return {
      code,
      cmRef,
      cmOptions,
      onChange,
      onInput,
      onReady,
    };
  },
};
</script>

index.vue(ts setup)

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
import type { CmComponentRef } from "codemirror-editor-vue3";
import type { Editor, EditorConfiguration } from "codemirror";

const code = ref(
  `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
);
const cmRef = ref<CmComponentRef>();
const cmOptions: EditorConfiguration = {
  mode: "text/javascript",
};

const onChange = (val: string, cm: Editor) => {
  console.log(val);
  console.log(cm.getValue());
};

const onInput = (val: string) => {
  console.log(val);
};

const onReady = (cm: Editor) => {
  console.log(cm.focus());
};

onMounted(() => {
  setTimeout(() => {
    cmRef.value?.refresh();
  }, 1000);

  setTimeout(() => {
    cmRef.value?.resize(300, 200);
  }, 2000);

  setTimeout(() => {
    cmRef.value?.cminstance.isClean();
  }, 3000);
});

onUnmounted(() => {
  cmRef.value?.destroy();
});
</script>