当前位置:网站首页>教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
2020-11-06 20:37:00 【叫我詹躲躲】
2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码,实现代码美化效果。不过这两年做项目都是用vue了,需要用到代码编辑器,于是我又找到了代码编辑器vue-codemirror,感觉组件再变,其原理、底层还是没多大变化,用vu e-codemirror,codemirror的方法,配置参数都是通用的,今天我就来分享一下我今天研究的vue-codemirror用法及一些坑的填法。我需要声明一点是我们项目用到的是框架ant-design-vue,所以弹窗我也直接拿来用了,有不懂的童鞋,可以参考https://www.antdv.com/components/modal-cn/。
1. 需要实现codemirror编辑器功能,主要是json数据的编辑
- codemirror基本的编辑代码功能
- 插入变量功能
- codemirror验证功能:主要验证代码格式,语法等,给出相应的提示
- 代码格式化(由于主要是json数据,所以暂时没引用其他组件,如果需要建议引用js-beautify,因为查资料发现codemirror在新的版本中已经去掉autoFormatRange方法)
大致如下图:
2. 写功能前需要安装的一些组件及用法简单说明,vue的就不说了,就光说这个编辑器需要的
2.1 vue-codemirror
- 安装vue-codemirror
npm install vue-codemirror --save
- vue-codemirror简单介绍
// require component
import {
codemirror } from 'vue-codemirror'
import jsonlint from 'jsonlint' //lint验证需要的组件,在下面详细讲
// require styles
import 'codemirror/lib/codemirror.css'
// require more codemirror resource...
import 'codemirror/mode/javascript/javascript' // 这js模式必须引入的
import 'codemirror/addon/selection/active-line' //光标行背景高亮,配置里面也需要styleActiveLine设置为true
import 'codemirror/keymap/sublime' //sublime编辑器效果
import 'codemirror/mode/css/css'
import 'codemirror/theme/monokai.css' //编辑器主题样式,配置里面theme需要设置monokai
//下面这几个引入的主要是验证提示类的,配置里的lint需要设置true,gutters: ['CodeMirror-lint-markers']
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/display/autorefresh' //及时自动更新,配置里面也需要设置autoRefresh为true
// view
<codemirror
ref="jsonEditor"
v-model="jsonData"
:options="options"
style="height: 600px;"
/>
// component
export default {
components: {
codemirror
}
}
2.2 如何获取编辑器对象调用方法
这个跟codemirror还是有区别的,codemirror我们需要初始化编辑器,然后拿着初始化对象就可以调用方法了,vu e-codemirror怎么获取呢?其实很简单,我们在编辑器组件上加上ref,通过ref获取。这个可以放到vue的computed里面,代码如下:
.../
computed: {
codemirror () {
return this.$refs.jsonEditor.codemirror
}
}
这样我们在需要调用方法的时候可以调用这个编辑器对象,我们可以设置获取编辑器的值。
2.3 插入变量是编辑器对象调用replaceSelection方法,如下代码:
methods: {
insertVar () {
this.codemirror.replaceSelection('"{
{lanfeng}}"')
}
}
2.4 代码格式化
由于实现的json格式化,所以没引入其他组件,
直接通过设置编辑器值来实现:代码如下:
this.$nextTick(() => {
this.codemirror.setValue((JSON.stringify(JSON.parse(this.jsonData), null, 2)))
})
其实就是调用的setValue设置值,之所以用$nextTick,是由于弹窗刚加载的时候,有可能编辑器没初始化好,获取不到编辑器对象。
2.5 codemirror的配置,mode设置支持的语言
mode: 'application/json'
其他的配置语言可以查看https://codemirror.net/mode/
有关vue-codemirror的事件我就不再列举,可以查看https://www.npmjs.com/package/vue-codemirror
3. codemirror验证提示
- 需要引入插件jsonlint
刚开始按文档引入lint资源的时候,发现不起作用,设置了可多,也不起作用,后来查看源码发现依赖这个插件
npm install jsonlint --save //npm 安装组件
import jsonlint from 'jsonlint' //引入
window.jsonlint = jsonlint //全局化
关于这个功能浪费了很多时间,当试用不成功想着引用别的插件来解决,后来看看源码,还是用了jsonlint 插件
总结
以上就是我分享的有关vue-codemirror代码编辑器实现的json数据编辑、json数据语法验证提示、及编辑器一些方法的用法,其实有个功能还没实现,就是实现代码折叠,这个还在研究中,以上仅代码我个人观点,如有错误,请多指正。
关注lovepythoncn
回复关键字:code, 就可以获取源码地址
版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558939
边栏推荐
- Calculation script for time series data
- Sort the array in ascending order according to the frequency
- 速看!互联网、电商离线大数据分析最佳实践!(附网盘链接)
- Swagger 3.0 天天刷屏,真的香嗎?
- Troubleshooting and summary of JVM Metaspace memory overflow
- 一时技痒,撸了个动态线程池,源码放Github了
- 大数据应用的重要性体现在方方面面
- Filecoin主网上线以来Filecoin矿机扇区密封到底是什么意思
- Using Es5 to realize the class of ES6
- Vue 3 responsive Foundation
猜你喜欢
Basic principle and application of iptables
Character string and memory operation function in C language
Filecoin最新动态 完成重大升级 已实现四大项目进展!
做外包真的很难,身为外包的我也无奈叹息。
至联云分享:IPFS/Filecoin值不值得投资?
Examples of unconventional aggregation
Calculation script for time series data
加速「全民直播」洪流,如何攻克延时、卡顿、高并发难题?
制造和新的自动化技术是什么?
业内首发车道级导航背后——详解高精定位技术演进与场景应用
随机推荐
Subordination judgment in structured data
Real time data synchronization scheme based on Flink SQL CDC
至联云分享:IPFS/Filecoin值不值得投资?
Filecoin最新动态 完成重大升级 已实现四大项目进展!
【新閣教育】窮學上位機系列——搭建STEP7模擬環境
Wiremock: a powerful tool for API testing
PHPSHE 短信插件说明
Aprelu: cross border application, adaptive relu | IEEE tie 2020 for machine fault detection
Filecoin主网上线以来Filecoin矿机扇区密封到底是什么意思
TRON智能钱包PHP开发包【零TRX归集】
Character string and memory operation function in C language
WeihanLi.Npoi 1.11.0/1.12.0 Release Notes
Swagger 3.0 天天刷屏,真的香嗎?
In order to save money, I learned PHP in one day!
制造和新的自动化技术是什么?
How long does it take you to work out an object-oriented programming interview question from Ali school?
C++和C++程序员快要被市场淘汰了
Analysis of react high order components
從小公司進入大廠,我都做對了哪些事?
EOS创始人BM: UE,UBI,URI有什么区别?