How to Use the Code Editor in Vue3

  • 2023/8/8
  • 2-minute read

Recent News

  1. Zoom, which became synonymous with remote work during the pandemic, recently announced that it is requiring employees to return to the office.

  2. With only twelve days left to submit presentation materials for the opensuse Asia Summit, those interested can take a look. The event will take place from October 21-23 at Chongqing University of Posts and Telecommunications.

  3. The Linux OSSummit in Japan is searching for passionate individuals to deliver energetic speeches across various technological fields. If you have a topic that can amaze the audience and wish to participate, consider checking it out.

  4. Scientists at Lawrence Livermore National Laboratory have achieved another milestone in the field of fusion energy. Learn how open-source contributes to advancing nuclear physics in the ReadME project. Address: https://github.com/readme/featured/nuclear-fusion-open-source

Using CodeMirror in Front-End Development

If you need an online code editor for your front-end web page, CodeMirror is a popular JavaScript library that you can embed.

Changelog:

Version 2.3.0

Date: March 7, 2023

Installation:

npm install codemirror-editor-vue3 codemirror@5.x -S

yarn add codemirror-editor-vue3 codemirror@5.x

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

If your project uses TypeScript, you also need to install the dependencies:

npm install @types/codemirror -D

// Import
import { InstallCodemirror } from "codemirror-editor-vue3";

However, global registration is not recommended as it may lead to incorrect template type prompts. It is better to use it within the component.

// Import themes, you can import multiple from codemirror/theme/ import ‘codemirror/theme/dracula.css’

// Import language modes, you can import multiple from codemirror/mode/ import “codemirror/mode/javascript/javascript.js”

Official Example:

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

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

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

// Import language modes
import "codemirror/mode/javascript/javascript.js";
// Import placeholder
import "codemirror/addon/display/placeholder.js";
// Import 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>

Common Attributes:

border: Border, default value: false

width, height: Width and height settings

KeepCursorInEnd: Keep the cursor at the end of the content, default value: false

english