安装vue-codemirror或@codemirror/view等CodeMirror相关插件。 安装sql-formatter用于格式化SQL语句。 创建CodeMirror组件: 在Vue 3项目中创建一个CodeMirror组件,用于代码编辑和展示。 配置CodeMirror以支持SQL语法高亮。 格式化SQL语句: 在组件中引入sql-formatter。 编写方法获取编辑器内容,并使用sql-formatter进行格式化。 将...
'codemirror/lib/codemirror.css'; // 引入主题后还需要在 options 中指定主题才会生效 import 'codemirror/theme/base16-light.css'; import 'codemirror/addon/selection/active-line'; import { codemirror } from '@/components/codemirror'; import { format as sqlFormatter } from 'sql-formatter'; import ...
"sql-formatter": "^15.4.0", "steady-xml": "^0.1.0", "url": "^0.11.3", "video.js": "^7.21.5", "vue": "^3.4.27", "vue-dompurify-html": "^4.1.4", "vue-i18n": "^9.13.1", "vue-router": "^4.3.2", ...
import 'codemirror/lib/codemirror.css'; // 引入主题后还需要在 options 中指定主题才会生效 import 'codemirror/theme/base16-light.css'; import 'codemirror/addon/selection/active-line'; import { codemirror } from '@/components/codemirror'; import { format as sqlFormatter } from 'sql-formatter'; ...
"codemirror":"5.61.1", "cropperjs":"^1.6.1", "crypto-js":"^4.2.0", "dayjs":"^1.11.10", "diagram-js":"^12.8.0", "driver.js":"^1.3.1", "echarts":"^5.4.3", "echarts-wordcloud":"^2.1.0", "element-plus":"^2.9.0", ...
"sql-formatter": "^15.4.0", "steady-xml": "^0.1.0", "url": "^0.11.3", "video.js": "^7.21.5", "vue": "^3.4.27", "vue-dompurify-html": "^4.1.4", "vue-i18n": "^9.13.1", "vue-router": "^4.3.2", ...
"codemirror":"5.61.1", "cropperjs":"^1.6.1", "crypto-js":"^4.2.0", "dayjs":"^1.11.10", "diagram-js":"^12.8.0", "driver.js":"^1.3.1", "echarts":"^5.4.3", "echarts-wordcloud":"^2.1.0", "element-plus":"^2.9.0", ...