教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
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
<codemirrorref="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, 就可以获取源码地址
教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化相关推荐
- ES6学习笔记(四):教你轻松搞懂ES6的新增语法
文章目录 let const let.const.var的区别 解构赋值 数组解构 对象解构 箭头函数 剩余参数 总结 let ES6新增的用于声明变量的关键字 let声明的变量只在所处于的块级有效 ...
- 教你彻底搞懂ARM Cortex-A75 CPU的数字后端实现报告
教你彻底搞懂ARM Cortex-A75 CPU的数字后端实现报告 文章右侧广告为官方硬广告,与吾爱IC社区无关,用户勿点.点击进去后出现任何损失与社区无关. 下图为 ARM 公司 release 的 ...
- php service原理,轻松搞懂WebService工作原理
用更简单的方式给大家谈谈WebService,让你更快更容易理解,希望对初学者有所帮助. WebService是基于网络的.分布式的模块化组件. 我们直接来看WebService的一个简易工作流程: ...
- 如何解决html文档无法复制,职场必备技能:网页文档无法复制,3招教你轻松搞定...
原标题:职场必备技能:网页文档无法复制,3招教你轻松搞定 其实很多人在浏览网页时都会遇到这个问题,看到了自己喜欢的文章片段,某一段文字特别符合自己的工作汇报,想要复制下来,结果却发现弹出了窗口,不是让 ...
- proe常用c语言语句,带你轻松搞懂Proe条件语句
原标题:带你轻松搞懂Proe条件语句 本文通过几个简单的例子介绍Proe中的条件语句,希望对你能有所帮助.Proe中使用的IF条件语句和C语言中的IF语句原理是一样的,其结构稍有差别.首先我们了解一下 ...
- 服务器微信服务号响应变慢,微信卡顿和响应慢,教大家轻松搞定:简单操作,赶快收藏分享吧...
原标题:微信卡顿和响应慢,教大家轻松搞定:简单操作,赶快收藏分享吧 作者:快分享(ID:280062218)致力于互联网价值资讯交流分享,妙招.美食.攻略大放送,欢迎来撩!点击上面的"关注& ...
- ppt中如何合并流程图_简单4招,教你轻松搞定PPT中的流程图!
原标题:简单4招,教你轻松搞定PPT中的流程图! 来自:PK阿锴(ID:akaippt) 作者:王培锴 今天跟大家分享PPT流程图的制作方法,流程图相信大家都经常遇到,通常分布着许多节点,由线条链接起 ...
- 如何在原先的jqgrid中填充新的数据_自然人电子税务局(扣缴端)数据如何恢复?申税小微教您轻松搞定...
自然人电子税务局 数据如何恢复? 申税小微教您轻松搞定! 财务小王:申税小微,我们公司换了新电脑,重新安装的自然人电子税务局(扣缴端)上没有人员采集信息和历史申报数据该怎么办? 申税小微: 1.可以在 ...
- 【机器学习sklearn】两个例子轻松搞懂核密度估计KernelDensity
前言 作业中遇到了需要使用KernelDensity的情况,但是网上的资料参差不齐,找了不短的时间却失望而归,最后还是靠着自己的理解才弄懂sklearn这个函数的使用,特此纪念. [机器学习sklea ...
- So easy ! 两句口号轻松搞懂Docker
作为云计算IT圈里人, 如果还不知道Docker,那就算out啦.不过,在搞懂Docker之前,得先来了解一下Docker的成名之路! 从dotCloud到Docker,一"开"鸣 ...
最新文章
- Codeforces Round #506 (Div. 3)
- CentOS 7 命令
- Win2000 Win2003安装卡巴斯基6.0
- 学C/C++的同学们,有福了!
- Docker 更换下载镜像源
- surefire 拉起testng单元测试类的源码流程阅读(一)
- php边框圆角,css3圆角和圆角边框使用方法总结
- 2021南京大学计算机复试线,南京大学2021年硕士研究生复试基本分数线
- linux 命令学习记录
- SpringBoot2.0 基础案例(09):集成JPA持久层框架,简化数据库操作
- 【flink】Flink 1.12.2 源码浅析 : Task 浅析
- 程序员如何高性能排序多个文件?
- 2018年5月26日笔记
- java 文件描述符_文件描述符了解一下
- 算法分析与设计:众数问题(C++,分治法)
- H.266/VVC相关技术学习笔记3:帧内色度预测模式中的DM模式及其在N次会议上相关的提案总结
- 四叶草的python代码_python绘图四叶草
- 全网搜php,PHP实现中文全文搜索的原理介绍
- 容器 服务:metrics-server 安装探索
- pritunl管理工具-路由转发配置