Some codemirror was implemented yesterday: Basic editing code functions, variable insertion functions, codemirror syntax validation functions, code formatting (because it is mainly JSON data, so no other components are referenced for the time being, if you need to refer to JS-Beautify, Codemirror has been removed from the autoFormatRange method in the new version of codemirror. Main implementation of code editing, verification tips, code formatting, today followed yesterday’s functional code continues, the main share vue-codemirror to achieve the search function, code folding function, access to the editor value timely verification function.

1. Vue-codemirror search function

1.1 Need to introduce the required resources on the original basis

import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.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'
Copy the code

In fact, the basic search function for these resources is already implemented. Press CTRL +F or Command +F to display the search box at the top of the editor.

1.2 Click the button to achieve the search effect

The product takes into account that some people may not know how to use shortcut keys, so it designs a button, clicks on the search button, and the search box appears at the top of the editor. SearchCode is the method called for the corresponding button click event.

methods: {
	searchCode (e) {
      this.codemirror.execCommand('find') / / triggers}}Copy the code

2. Vue-codemirror folding function

At the beginning of the editor, I wanted to add the folding function, but I tried and failed, because there are many configurations and resources need to be introduced, so I added this function at the end.

2.1 Vue -codemirror folding needs to import resources, both style files and JS files, these are indispensable

/ / folding
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
Copy the code

2.2 Vue-codemirror Basic configuration required for Folding

{
	 foldGutter: true.lineWrapping: true.gutters: ['CodeMirror-linenumbers'.'CodeMirror-foldgutter'.'CodeMirror-lint-markers'],}Copy the code

Vue-codemirror folding requires no extension, just the introduction of configuration parameters that require resources and initialization.

Get the editor value in time validation function

This function is actually in the vue – codemirror code editor values appear grammar mistakes, become do not click button in time, the duty is not what the wrong time, click the submit button to state, did not find a better editor validation status values, only want to a little shortcut, determine whether there is an error code, Use Watch to monitor the data and see if there is any error when the data changes. The implementation code is as follows:

 watch: {
    jsonData (val) {
      this.checkValid()
    }
  },
  methods: {
  checkValid () {
      setTimeout((a)= > {
        this.codemirror.refresh()
        const container = this.$refs.codeMirror
        const len = container.querySelectorAll('.CodeMirror-lint-marker-error').length
        this.isValid = !! len && len >0
      }, 1000)}}Copy the code

The effect is shown below:


Conclusion:

Vue-codemirror today is mainly followed by “teach you to easily understand the basic usage of vue-codemirror: mainly implement code editing, verification prompts, code formatting” article continue to share some usage of Vue-codemirror, mainly implement search, code folding and other functions. This is just my personal opinion, if there are mistakes, please correct them. Focus on lovepythoncn * *