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 相关文章推荐
自写的一个jQuery圆角插件
Oct 26 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
详解微信小程序开发之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 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php遍历数组的方法分享
2012/03/22 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
TopList标签和JavaScript结合两例
2007/08/12 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
Vue axios设置访问基础路径方法
2018/09/19 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
生产经理的自我评价分享
2013/11/07 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
预备党员公开承诺书
2014/05/28 职场文书
写字楼租赁意向书
2014/07/30 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
python对文档中元素删除,替换操作
2022/04/02 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL
Java 写一个简单的图书管理系统
2022/04/26 Java/Android