Shulou(Shulou.com)06/02 Report--

Vue codemirror how to achieve online code compiler, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, hope you can gain something.

Preface

If we want to achieve the effect of online code compilation on the web side, we need to use the component vue-codemirror, which encapsulates the CodeMirror again.

Support code highlighting

62 theme colors, such as monokai, etc.

Json, sql, javascript,css,xml, html,yaml, markdown, python editing modes are supported. Default is json.

Support for fast search

Automatic completion prompt is supported

Support for automatic matching of parentheses

Environment prepares npm install jshintnpm install jsonlintnpm install script-loadernpm install vue-codemirror encapsulation components

We can package the vue-codemirror again in the components in the project.

Import {codemirror} from "vue-codemirror"; import 'codemirror/keymap/sublime'import "codemirror/mode/javascript/javascript.js"; import "codemirror/mode/xml/xml.js"; import "codemirror/mode/htmlmixed/htmlmixed.js"; import "codemirror/mode/css/css.js"; import "codemirror/mode/yaml/yaml.js"; import "codemirror/mode/sql/sql.js"; import "codemirror/mode/python/python.js"; import "codemirror/mode/markdown/markdown.js" Import "codemirror/addon/hint/show-hint.css"; import "codemirror/addon/hint/show-hint.js"; import "codemirror/addon/hint/javascript-hint.js"; import "codemirror/addon/hint/xml-hint.js"; import "codemirror/addon/hint/css-hint.js"; import "codemirror/addon/hint/html-hint.js"; import "codemirror/addon/hint/sql-hint.js"; import "codemirror/addon/hint/anyword-hint.js" Import "codemirror/addon/lint/lint.css"; import "codemirror/addon/lint/lint.js"; import "codemirror/addon/lint/json-lint"; import 'codemirror/addon/selection/active-line'import "codemirror/addon/hint/show-hint.js"; import "codemirror/addon/hint/anyword-hint.js"; require ("script codemirror/addon/hint/anyword-hint.js"); import "codemirror/addon/lint/javascript-lint.js"; import "codemirror/addon/fold/foldcode.js" Import "codemirror/addon/fold/foldgutter.js"; import "codemirror/addon/fold/foldgutter.css"; import "codemirror/addon/fold/brace-fold.js"; import "codemirror/addon/fold/xml-fold.js"; import "codemirror/addon/fold/comment-fold.js"; import "codemirror/addon/fold/markdown-fold.js"; import "codemirror/addon/fold/indent-fold.js"; import "codemirror/addon/edit/closebrackets.js"; import "codemirror/addon/edit/closetag.js" Import "codemirror/addon/edit/matchtags.js"; import "codemirror/addon/edit/matchbrackets.js"; import "codemirror/addon/selection/active-line.js"; import "codemirror/addon/search/jump-to-line.js"; import "codemirror/addon/dialog/dialog.js"; import "codemirror/addon/dialog/dialog.css"; import "codemirror/addon/search/searchcursor.js"; import "codemirror/addon/search/search.js"; import "codemirror/addon/display/autorefresh.js" Import "codemirror/addon/selection/mark-selection.js"; import "codemirror/addon/search/match-highlighter.js"; export default {name: "index", components: {codemirror}, props: ["cmTheme", "cmMode", "cmIndentUnit", "autoFormatJson"], data () {return {editorValue:'{}', cmOptions: {theme:! this.cmTheme | | this.cmTheme = = "default"? "default": this.cmTheme, / / topic mode:! this.cmMode | | this.cmMode = = "default"? "application/json": this.cmMode, / / code format tabSize: 4, / / number of spaces of tab indentUnit:! this.cmIndentUnit? 2: this.cmIndentUnit, / / how many spaces should a block (meaning in editing language) be indented autocorrect: true, / / autocorrect spellcheck: true, / / spell check lint: true / / check the format lineNumbers: true, / / whether the number of lines is displayed lineWrapping: true, / / whether the line wrapping is automatically styleActiveLine: true, / / line select whether to highlight keyMap: 'sublime', / / sublime editor effect matchBrackets: true, / / parentheses match autoCloseBrackets: true / / parentheses and quotation marks matchTags: {bothTags: true} will be automatically closed as you type, / / the label foldGutter: true around the cursor will be highlighted, / / the object can be collapsed Use gutters with the following gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"], highlightSelectionMatches: {minChars: 2, style: "matchhighlight", showToken: true},}, enableAutoFormatJson: this.autoFormatJson = = null? True: in this.autoFormatJson, / / json editing mode, whether the input box is automatically formatted when it loses focus, true is on, false is off}}, created () {try {if (! this.editorValue) {this.cmOptions.lint = false; return;} if (this.cmOptions.mode = "application/json") {if (! this.enableAutoFormatJson) {return } this.editorValue = this.formatStrInJson (this.editorValue);}} catch (e) {console.log ("error initializing codemirror:" + e);}}, methods: {resetLint () {if (! this.$refs.myCm.codemirror.getValue ()) {this.$nextTick (() = > {this.$refs.myCm.codemirror.setOption ("lint", false) }); return;} this.$refs.myCm.codemirror.setOption ("lint", false); this.$nextTick (() = > {this.$refs.myCm.codemirror.setOption ("lint", true);}) }, / / the format string is the json format string formatStrInJson (strValue) {return JSON.stringify (JSON.parse (strValue), null, this.cmIndentUnit);}, onCmCodeChanges (cm, changes) {this.editorValue = cm.getValue (); this.resetLint () }, / / handle function onCmBlur (cm, event) {try {let editorValue = cm.getValue (); if (this.cmOptions.mode = "application/json" & & editorValue) {if (! this.enableAutoFormatJson) {return;} this.editorValue = this.formatStrInJson (editorValue) when losing focus }} catch (e) {/ / do nothing}}, / / press the keyboard event handler function onKeyDown (event) {const keyCode = event.keyCode | | event.which | | event.charCode; const keyCombination = event.ctrlKey | | event.altKey | | event.metaKey If (! keyCombination & & keyCode > 64 & & keyCode < 123) {this.$refs.myCm.codemirror.showHint ({completeSingle: false})}}, / / event handler function onMouseDown (event) {this.$refs.myCm.codemirror.closeHint () when the mouse is pressed }, / / paste event handler OnPaste (event) {if (this.cmOptions.mode = "application/json") {try {this.editorValue = this.formatStrInJson (this.editorValue);} catch (e) {/ / do nothing}},}}

This component is configured with the json compiler by default. CmOptions is the configuration item of the code compiler. If you need additional functions, you can also see the official documentation configuration.

Next, let's take a look at the display effect.

You can see that we have entered a string in json format, even if the format is incorrect, it will give us an error prompt, and it will also give us automatic formatting.

Python compiler

The component we encapsulated is the json compiler by default. If we want to use other languages, it is also very simple. We only need to import mode from other languages.

Click Save online to run import codeEditor from'@ / components/CodeEditor/index'import 'codemirror/theme/monokai.css' / / Import monokai theme import' codemirror/mode/python/python.js' / / Import pythonexport default {name: "index", components: {codeEditor}, data () {return {cmTheme: "monokai", cmMode: "python",}} Methods: {handleConfirm () {}, handleRunCode () {}}. CodeMirror {position: relative Height: 100vh; overflow: hidden; margin-top: 10px;}

The effect is as follows

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.