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 在各个浏览器中执行的耐性
Apr 06 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
绑定回车enter事件代码
May 18 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
基于jquery实现五星好评
Nov 18 jQuery
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 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学习之数据类型之间的转换代码
2011/05/29 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
竞选班干部演讲稿
2014/04/24 职场文书
工作鉴定评语
2014/05/04 职场文书
2014年会策划方案
2014/05/11 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
python中tkinter复选框使用操作
2021/11/11 Python