Explain

codeMirror is a very powerful code editing plug-in, which provides a very rich API. Recently, this plug-in has been used in the project to make a record.

Official website

github address

install

• download the installation package directly on github or clone

• npm installation

      npm install --save  codemirror

Introduce

*Manual introduction of external

<link href="./static/codemirror/lib/codemirror.css" rel="stylesheet" > // necessary
<script src="./static/codemirror/lib/codemirror.js"></script> // necessary
<script src="./static/codemirror/mode/sql/sql.js"></script> // Language sql for online editing
<script src="./static/codemirror/mode/sql/javscript.js"></script> // Online editing language javascript

*npm Introduction (in vue project)

import "codemirror/lib/codemirror.css" //necessary
const CodeMirror = require("codemirror/lib/codemirror") // necessary
require("codemirror/mode/sql/sql") // Language sql for online editing
require('codemirror/addon/display/placeholder') // The placeholder attribute is required

Use

• Basic use

<template>
    <textarea placeholder="for example select * from table" ref="myCodeMirror"></textarea>
</template>

<script>
import "codemirror/lib/codemirror.css" //necessary
const CodeMirror = require("codemirror/lib/codemirror") // necessary
require("codemirror/mode/sql/sql") // Language sql for online editing
require('codemirror/addon/display/placeholder') // The placeholder attribute is required

export default {
    ...
    mounted () {
        this.myCodeMirror = CodeMirror.fromTextArea(this.$refs['myCodeMirror'], {
            lineNumbers: true, // Show rows or not
            mode: 'text/x-pgsql', // What mode text/x-pgsql is SQL JavaScript, etc
            showCursorWhenSelecting: true, // Display cursor when selected
            extraKeys: {'Ctrl': 'autocomplete'} // Custom shortcut
        })
    }
}
</script>

• Get the input content this.myCodeMirror.getValue()
• Get the selection this.myCodeMirror.getSelection()

Explain

The official website provides a very rich API. When there is a question on github, the author replies very quickly, which is very easy to use. Like a