Basic usage of Vue codemirror: search function, code folding function, get editor value and verify in time

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

Yesterday, we realized some codemirror： Basic edit code function 、 Insert variable function 、codemirror Syntax verification function 、 Code formatting （ Because it's mainly json data , So there is no reference to other components for the time being , If necessary, suggest quoting js-beautify, Because we found that codemirror In the new version autoFormatRange Method ）, If you want to know more , Please refer to 《 Teach you to understand easily vue-codemirror The basic usage of ： The main implementation of code editing 、 Verification tips 、 Code formatting 》, Today continues with yesterday's function code , Mainly share vue-codemirror Realize search function 、 Code folding function 、 Get editor value and verify function in time .

1. vue-codemirror Search function

1.1 On the basis of the original need to introduce the required resources

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'

In fact, the basic search function of introducing these resources has been realized , Press ctrl+F perhaps command+F The search box appears 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 the shortcut key , I designed a button , Click to search , Click the search button , The search box appears at the top of the editor .searchCode It is the corresponding method called when the button is pressed .

methods: {
   
	searchCode (e) {
   
      this.codemirror.execCommand('find') // Trigger 
  }
}

2. vue-codemirror Folding function

The folding function just started to make this editor and wanted to add , But I tried and I didn't succeed , Because there are many configurations , We also need to introduce resources , So this one is put at the end .

2.1 vue-codemirror Collapse the resources that need to be introduced , There are both style files and js file , These are indispensable

//  Fold 
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'

2.2 vue-codemirror The basic configuration required for folding

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

vue-codemirror Folding doesn't need to expand any function , Just introduce the configuration parameters that need resources and configure initialization .

Get editor value and verify function in time

In fact, this function is in vue-codemirror When the code editor value has a syntax error , In time, the button becomes non clickable , When there is nothing wrong with it , The submit button is clickable , No better value to get the editor validation state , Can only think of a small shortcut , Determine if there is an error code , use watch Monitor data , When the data changes , See if there's a mistake . The implementation code is as follows ：

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

The effect is as follows ：

summary ：

Today is mainly followed by 《 Teach you to understand easily vue-codemirror The basic usage of ： The main implementation of code editing 、 Verification tips 、 Code formatting 》 The article continues to share vue-codemirror Some uses of , The main implementation of the search 、 Code folding and other functions . It's just my personal opinion , If there is a mistake , Welcome to correct .
Focus on lovepythoncn
**

Reply key ：code2, You can get the source code address