vue实现codemirror代码编辑器中的SQL代码格式化功能


Posted in Javascript onAugust 27, 2019

vue实现codemirror代码编辑器中的SQL代码格式化功能

1、首先使用npm安装sql-formatter插件

npm install --save sql-formatter

2、然后引入该sql-formatter.js文件

import sqlFormatter from "sql-formatter";

3、接下来就是针对需要格式化的代码调用该方法就OK啦

/*代码格式化*/
   format(){
    /*获取文本编辑器内容*/
    let sqlContent="";
    sqlContent=this.editor.getValue();
    /*将sql内容进行格式后放入编辑器中*/
    this.editor.setValue(sqlFormatter.format(sqlContent));
   }

4、下面截图就是格式化前与格式化后的区别

vue实现codemirror代码编辑器中的SQL代码格式化功能

vue实现codemirror代码编辑器中的SQL代码格式化功能

总结

以上所述是小编给大家介绍的vue实现codemirror代码编辑器中的SQL代码格式化功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
php跨域调用json的例子
Nov 13 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 #Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 #Javascript
vue使用codemirror的两种用法
Aug 27 #Javascript
微信小程序中为什么使用var that=this
Aug 27 #Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 #Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 #Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
You might like
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
体育节口号
2014/06/19 职场文书
个性车贴标语
2014/06/24 职场文书
电子工程求职信
2014/07/17 职场文书
相亲活动方案
2014/08/26 职场文书
委托书怎样写
2014/08/30 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android