当前位置:网站首页>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:00 【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
**
Reply key :code2, You can get the source code address
版权声明
本文为[Tell me Zhan to hide]所创,转载请带上原文链接,感谢
边栏推荐
- CCR coin frying robot: the boss of bitcoin digital currency, what you have to know
- Named entity recognition in natural language processing: tanford core LP ner (1)
- Jmeter——ForEach Controller&Loop Controller
- The importance of big data application is reflected in all aspects
- 一部完整的游戏,需要制作哪些音乐?
- CloudQuery V1.2.0 版本发布
- What are Devops
- es创建新的索引库并拷贝旧的索引库 实践亲测有效!
- 大数据处理黑科技:揭秘PB级数仓GaussDB(DWS) 并行计算技术
- Analysis of ThreadLocal principle
猜你喜欢
Building a new generation cloud native data lake with iceberg on kubernetes
What are the criteria for selecting a cluster server?
检测证书过期脚本
01. SSH Remote terminal and websocket of go language
【:: 是什么语法?】
Custom function form of pychar shortcut key
Contract trading system development | construction of smart contract trading platform
事务的隔离级别与所带来的问题
大会倒计时|2020 PostgreSQL亚洲大会-中文分论坛议程安排
What is the meaning of sector sealing of filecoin mining machine since the main network of filecoin was put online
随机推荐
【字节跳动 秋招岗位开放啦】Ohayoo!放学别走,我想约你做游戏!!!
What if the front end doesn't use spa? - Hacker News
CloudQuery V1.2.0 版本发布
What are the criteria for selecting a cluster server?
【自学unity2d传奇游戏开发】如何让角色动起来
A small goal in 2019 to become a blog expert of CSDN
Named entity recognition in natural language processing: tanford core LP ner (1)
How does filecoin's economic model and future value support the price of fil currency breaking through thousands
The legality of IPFs / filecoin: protecting personal privacy from disclosure
行为型模式之备忘录模式
electron 實現檔案下載管理器
Markdown tricks
What are Devops
IPFs rudder filecoin landing at the same time, fil currency price broke a thousand
一部完整的游戏,需要制作哪些音乐?
MongoDB与SQL常用语法对应表
The importance of big data application is reflected in all aspects
Introduction to X Window System
Who says cat can't do link tracking? Stand up for me
How about small and medium-sized enterprises choose shared office?