Vue 实现 codeMirror 结合 sql-formatter 实现 sql 高亮及格式化
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
背景:
需求是页面渲染一个类似 SQL 编辑器的功能,需要支持关键字高亮以及格式化功能
由于之前做过一个小 demo,接触过codeMirror,手到擒来,先在项目中引入 codeMirror 实现编辑器的功能
- npm 安装 vue-codemirror 插件
npm install vue-codemirror --save
- 在项目中引入 vue-codemirror
官网上有引入方式请参考官网
https://www.npmjs.com/package/vue-codemirror
https://codemirror.net/index.html
我这里是单独引用的,以下是基础引入 codemirror 需要引入的文件
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
另外我们还需要引入对应像渲染到页面的语言文件以及主题来达到关键字高亮以及整体编辑器的渲染效果(主题是非必选项)
import 'codemirror/mode/sql/sql.js' // 引入mode
import 'codemirror/theme/solarized.css' // 引入theme
- 调用 vue-codemirror
<codemirror ref="myCm" v-model="sql" :options="cmOptions"></codemirror>
cmOptions 为 codemirror 的配置项
cmOptions: {
tabSize: 4,
styleActiveLine: true,
lineNumbers: true,
line: true,
mode: 'text/x-mssql', // SQL SERVER
smartIndent: true,
indentUnit: 4,
autoRefresh: true,
theme: 'solarized light' //对应引入的主题
}
以上页面的编辑器就可以成功渲染
接下来实现 SQL 的格式化功能
官网链接https://www.npmjs.com/package/sql-formatter
- npm 安装 sql-formatter
npm install sql-formatter
- 引入 sql-formatter
import { format } from 'sql-formatter';
- 调用 sql-formatter
format('SELECT * FROM tbl', {
language: 'spark', // Defaults to "sql" (see the above list of supported dialects)
indent: ' ', // Defaults to two spaces
uppercase: bool, // Defaults to false
linesBetweenQueries: 2, // Defaults to 1
});
成果展示:
格式化之前
格式化之后
礼成!完结撒花!
看了好多博客再加上自己的一些见解写出的文章,如果错误请指出,虚心接受错误,轻喷!!!
爬坑记录:
q:页面初始化加载时,编辑器获取不到焦点,需要点击一下才能渲染 SQL
a: 需要在页面渲染完毕后,调用一个编辑器刷新的函数
setTimeout(() => {
this.$refs.myCm.codemirror.refresh();
this.$refs.myCm2.codemirror.refresh();// PS: 如果页面有多个编辑器时,我分别在调用的时候声明了不同名字的ref
}, 1);
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)