codemirror-editor-vue3

Introduction

The plug-in is based on Codemirror and only supports vue3. 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";

Changelog

2.0.4

2022-03-17

• 🐞 Fix the problem that the merge mode failed to be used. #14
• 🌟 Add ts type: get the type of component through ref CmComponentRef.

• 🐞 修复 merge 模式报错无法使用问题 #14
• 🌟 增加 ts 类型：通过 ref 获取组件的类型CmComponentRef