当前位置:网站首页>Basic usage of Vue codemirror: search function, code folding function, get editor value and verify in time

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

2020-11-06 20:42:42 Tell me Zhan to hide

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 .
![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODk1MzkzNjUyMzYtMmJjZjM3ZGEtMWVkZi00MjE3LWE2NjMtY2U5MGE3YzEyYTM1LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=520&margin=[object Object]&name=image.png&originHeight=1040&originWidth=1280&size=98603&status=done&style=none&width=640)

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 :
![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODk1NDA1NDMzMTItNDZjMjBiZDgtMTcwMC00OTJkLWFjMTUtYTBiMzI0ZGQ3NmY1LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=1038&margin=[object Object]&name=image.png&originHeight=1038&originWidth=1266&size=100464&status=done&style=none&width=1266)

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
**
qrcode_for_gh_4d3763fa9780_258 (1).jpg
Reply key :code2, You can get the source code address

版权声明
本文为[Tell me Zhan to hide]所创,转载请带上原文链接,感谢