vue实现codemirror代码编辑器中的SQL代码格式化功能
2019-08-27 14:15
2827 查看
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代码格式化功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- 使用CodeMirror在浏览器中实现编辑器的代码高亮效果
- 自己很丰衣足食Geany中tidy配置,实现自动格式化代码功能
- vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
- Vue+Express实现登录注销功能的实例代码
- vue-codemirror 代码编辑器
- 基于Vue组件化的日期联动选择器功能的实现代码
- vue实现自定义日期组件功能的实例代码
- Vue自定义过滤器格式化数字三位加一逗号实现代码
- Vue.js 实现微信公众号菜单编辑器功能(二)
- Vue.js 实现微信公众号菜单编辑器功能(一)
- vue中实现代码高亮,格式化
- vue实现PC端录音功能的实例代码
- vue实现随机验证码功能的实例代码
- 使用eclipse的JDT实现JAVA代码格式化功能
- 使用vue实现grid-layout功能实例代码
- cropper js基于vue的图片裁剪上传功能的实现代码
- vue动态绑定组件子父组件多表单验证功能的实现代码
- FCKeditor 编辑器插入代码功能实现步骤
- PHP实现SQL语句格式化功能的方法 原创
- vue中子组件向父组件传递数据的实例代码(实现加减功能)