In the process of developing vUE project, we need a code editor that can customize rules, and finally choose VUe-Codemirror for development. Vue-codemirror is based on Codemirror and applies to Vue’s code editor.

  • The official documentation
  • npm
    • Codemirror
    • Vue-Codemirror
  • demo

Function is introduced

  1. Multiple theme support
  2. Multi-language support (JSON, YAML, XML, JSX, SQL, CSS, C, C ++, etc.)
  3. Grammar check
  4. Code folding,
  5. Code alignment and merging
  6. Code completion
  7. . The function such as

Install

  • npm
npm install vue-codemirror --save

Copy the code

The introduction of

import 'codemirror/lib/codemirror.css'
import VueCodemirror from 'vue-codemirror';
Copy the code

-cdn

<link rel="stylesheet" href="... / codemirror / 5.59.1 / lib/codemirror. CSS "> < script type =" text/javascript SRC = "..." / codemirror / 5.59.1 / lib/codemirror. Js > < / script > < script type = "text/javascript SRC ="..." / vue - codemirror / 4.0.6 / dist/vue - codemirror. Js "> < / script >Copy the code

Mount

  • global
import Vue from 'vue'; import VueCodemirror from 'vue-codemirror'; Vue. Use (VueCodemirror, {... The options})Copy the code
  • component
  import Vue from 'vue';
  import Component from 'vue-class-component';
  import { codemirror } from 'vue-codemirror';
  
   @Component({
        name: 'Demo',
        components: {
            codemirror
        }
    })

Copy the code

Create

<template> <codemirror ref="myCm" :value="info.content" :options="cmOptions" @input="changes"> </codemirror> </template>  <script> import Vue from 'vue' import Component from 'vue-class-component' import { codemirror } from 'vue-codemirror' @Component({ name: 'Demo', components: { codemirror } }) export default class Demo extends Vue { cmOptions = { mode: 'application/json', // Theme: '3024-day', // theme: indentUnit: 4, // How many Spaces tabSize: 4, // TAB width lineNumbers: LineWrapping: true, // whether to display lineWrapping: true, // whether to default firstLineNumber: 3, // which number to start counting lines. Default value: 1 readOnly: false, // Forbid user to edit editor contents line: true, smartIndent: true // smart indentation}} </script>Copy the code

When setting mode, import mode.js. Similarly, when setting the theme, you need to introduce the corresponding theme.css. Since JSON is a type of JavaScript, JavaScript is also required.

  • cdn
<link rel="stylesheet" href="... / codemirror 5.59.1 / theme / 3024 - day. CSS "> < script type =" text/javascript SRC = "..." / codemirror / 5.59.1 / mode/javascript/javascript. Js "> < / script >Copy the code
  • npm
import 'codemirror/theme/3024-day.css'
import 'codemirror/mode/javascript/javascript.js'
Copy the code

If mode needs to support YAML, you need to introduce yaml.js

import 'codemirror/mode/yaml/yaml.js'
Copy the code

Codemirror lint

Json requires the introduction of jSON-lint.js, or yaml-lint.js if it is yaml. However, Codemirror supports only CSS, HTML, javascript, JSON, YAML, and Coffeescript

<link rel="stylesheet" href="... Codemirror / 5.59.1 / addon/lint/lint. CSS "> < script SRC ="... Codemirror / 5.59.1 / addon/lint/lint. Js "> < / script > < script SRC ="... Codemirror / 5.59.1 / addon/lint/json - lint. Js "> < / script > < script SRC = "https://unpkg.com/[email protected]/web/jsonlint.js" > < / script >Copy the code

In addition, you need to perform corresponding configuration in Options

this.cmOptions = {
    lineNumbers: true,
    mode: "application/json",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
}
Copy the code

Codemirror Merge

First, we need to introduce Diff_math_patch, and then the corresponding merge.js and merge.css of Codemirror

<link rel="stylesheet" href="... Codemirror / 5.59.1 / addon/merge/merge. CSS "> < script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script> <script src="... Codemirror / 5.59.1 / addon/merge/merge. Js "> < / script >Copy the code

Then, you need to configure options

MergeOptions = {mode: 'application/json', // theme: 'yeti', // lineNumbers: true, // Whether to display line number origLeft: Null, showDifferences: true, // When true(the default), the changed text segment will be highlighted collapseIdentical: false, // When true(the default is false), the unmodified text segment will be collapsed. Connect: 'center', // Sets the style of the code block used to connect changes value: '{\ n "k1" : "v1" \ n "k2" : "v2", \ n "k3" : "v3" \ n "k4" : "v4" \ n "k5" : "the v5," \ n "k6" : "6", \ n "k7" : "v7" \ n}', / / on the left side of the old file orig: '{\ n "k1" : "v1" \ n "k3" : "v3" \ n "k4" : "v4" \ n "k7" : "v7" \ n}'} / / on the right side of the new fileCopy the code

Codemirror Fold

First, you need to remove the related packages for the related folding functionality

<link rel="stylesheet" href="... /codemirror/addon/fold/foldgutter.css"> <script src="... /codemirror/addon/fold/foldcode.js"></script> <script src="... /codemirror/addon/fold/foldgutter.js"></script> <script src="... /codemirror/addon/fold/xml-fold.js"></script>Copy the code

Second, you need to configure options

FoldOptions = {mode: 'text/ HTML ', // mode theme: 'MDN -like', // theme:' lineNumbers' : true, // whether to display line number lineWrapping: True, foldGutter: true, // Support fold gutters: ['CodeMirror-linenumbers', 'CodeMirror- foldGutter ']}Copy the code

Display before folding

Display after folding

Codemirror has some specific attribute methods. If you need to know more, you can refer to its corresponding official documentation and Github.