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 面向对象编程
Oct 28 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
深入浅析react native es6语法
Dec 09 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
sphinx增量索引的一个问题
2011/06/14 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
python循环监控远程端口的方法
2015/03/14 Python
python复制文件的方法实例详解
2015/05/22 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
浅谈python锁与死锁问题
2020/08/14 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
高中政治教学反思
2014/01/18 职场文书
领导党性分析材料
2014/02/15 职场文书
捐助倡议书范文
2014/04/15 职场文书
电钳工人个人求职信
2014/05/10 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
社区党员公开承诺书
2014/08/30 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2015年三万活动总结
2015/03/25 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python