1, use

Used for front-end page editing, display code, flexible choice of language, such as shell, SQL, Python, JS, etc., can customize the theme and code tips, etc., very powerful.

2, installation,

npm install vue-codemirror --save
Copy the code

3

import VueCodeMirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';
Vue.use(VueCodeMirror);
Copy the code

4. Import the current component

import { codemirror } from 'vue-codemirror'; import 'codemirror/theme/liquibyte.css'; Theme / / import the selected theme, consistent with the initialization theme configuration import 'codemirror/addon/hint/show - hint. CSS'; / / import automatically tip core styles import 'codemirror/mode/SQL/SQL js'; / / import use language syntax definition file, the initialization mode configuration consistent import 'codemirror addon/edit/matchbrackets js'; import 'codemirror/addon/hint/show-hint.js'; / / import automatically prompt the core file import 'codemirror addon/hint/SQL - hint. Js'; // Import a prompt file for the specified languageCopy the code

5. Declare components

components:{ 
  codemirror
},
Copy the code

6. Use components

<codemirror
    ref="mycode"   
    v-modle="curCode"   
    :options="cmOptions"  
    class="code">        
</codemirror>
Copy the code

7. Configuration of cmOptions in data

CurCode: ", cmOptions:{value: ",// editor start value. It can be a string or a document object. Mode :"text/x-hive",// The first maps schema names to their constructors, and the second maps MIME types to schema specifications. Theme: "liquibyte",// editor style theme indentWithTabs: true,// tabSize should replace the first N * Spaces with N tabs when indenting. The default value is false. SmartIndent: true,// Whether to use context-sensitive indentation provided by the schema (or just the same indentation as the previous line). The default is true. LineNumbers: true,// whether to display lineNumbers on the left side of the editor. MatchBrackets: true,// Brackets match autofocus: true,// Can be used to make CodeMirror focus on initialization extraKeys: {" Ctrl-space ": "Autocomplete "},// Key configuration hintOptions: {tables: {users: ["name", "score", "birthDate"], countries: ["name", "population", "size"] }} },Copy the code

8. Sample diagrams