教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化

vue 专栏收录该内容
29 篇文章 1 订阅

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方法)

大致如下图:
image.png

2. 写功能前需要安装的一些组件及用法简单说明,vue的就不说了,就光说这个编辑器需要的

2.1 vue-codemirror

  1. 安装vue-codemirror
npm install vue-codemirror --save
  1. 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验证提示

  1. 需要引入插件jsonlint

刚开始按文档引入lint资源的时候,发现不起作用,设置了可多,也不起作用,后来查看源码发现依赖这个插件
image.png

npm install jsonlint --save  //npm 安装组件
import jsonlint from 'jsonlint' //引入
window.jsonlint = jsonlint  //全局化

关于这个功能浪费了很多时间,当试用不成功想着引用别的插件来解决,后来看看源码,还是用了jsonlint 插件

总结

以上就是我分享的有关vue-codemirror代码编辑器实现的json数据编辑、json数据语法验证提示、及编辑器一些方法的用法,其实有个功能还没实现,就是实现代码折叠,这个还在研究中,以上仅代码我个人观点,如有错误,请多指正。
关注lovepythoncn
qrcode_for_gh_4d3763fa9780_258 (1).jpg
回复关键字:code, 就可以获取源码地址

  • 15
    点赞
  • 22
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> 本课程适合有JAVA和数据库基础人员。 </p> <p> 本课程使用Eclipse和<span style="font-size:13.3333px;">IntelliJ IDEA两种开发工具,详细讲解了MyBatis各种语法,并且讲解了MyBatis逆向工程和MyBatis两种常用插件MyBatis Plus和通用Mapper。</span> </p> <p> <span style="font-size:13.3333px;">本课程从理论和实际案例两方面充分讲解了MyBatis各种技术细节,和应用场景,并且以绘图方式讲解了各种MyBatis中较难技术点。</span> </p> <p> <span style="font-size:13.3333px;">相信可以通过本课程学习,读者能够掌握MyBatis学习过程中各种技巧和实际案例。</span> </p> <p> <span style="font-size:13.3333px;">本课程中设计大致技术点,如下所示。</span> </p> <p>       1.EclipseIntelliJ IDEA环境下开发MyBatis </p> <span></span>      2.MyBatis多种方式CRUD<br />       3.MyBatis配置文件详解<br />       4.MyBatis映射文件详解<br />       5.使用MyBatis调用存储过程<br />       6.动态SQL<br />       7.关联查询<br />       8.延迟加载<br />       9.整合一级二级缓存<br />       10.逆向工程<br />       11.事务操作<br />       12.MyBatis处理多个参数问题<br />       13.鉴别器和别名<br />       14.各种方式模糊查询<br />       15.MyBatis核心源码分析<br />       16.MyBatis拦截器<br />       17.MyBatis批量更新操作<br />       18.PageHelper<br />       19.MyBatis Plus详解<br />       20.通用Mapper详解<br /><p>    希望大家可以通过本课程学习,深入掌握MyBatis及其各种插件用法,从而提高对数据操作效率 </p> <p> <br /></p>
相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值