本项目是基于 Vue2 + Codemirror 开发的 Web 版 SQL 编辑器,提供了以下功能: 在线运行 SQL 语句 实时命令提示(支持表名、字段名、SQL关键词提示) 查看SQL 执行结果 提交SQL 命令集 快捷使用命令集 SQL 语句格式化 SQL code differ 动态设置编辑器配置项 实时查看表结构 说明:本项目仅供学习研究使用! 项目使用 clone项
1. npm install sql-formatter --save 2.npm install codemirror --save 二、在components中创建文件来存放sql这个功能,哪里需要哪里搬 复制以下代码到文件里 <template> <textarea ref="sqlEditor" v-model="value" class="codesql"></textarea> </template> // 引入核心样式 import "codemirror/theme/...
// 使用时需要根据CodeMirrorEditor.vue的实际存放路径,调整from后面的组件路径,以便正确引用 import CodeMirrorEditor from "@/common/components/public/CodeMirrorEditor"; export default { components: { CodeMirrorEditor }, data() { return { cmTheme: "default", // codeMirror主题 // codeMirror主题选项 cmTh...
import { codemirror } from "vue-codemirror"; // 引入css文件 import "codemirror/lib/codemirror.css"; // 引入主题 可多个 import "codemirror/theme/ayu-mirage.css"; // 引入语言模式 可多个 import "codemirror/mode/sql/sql.js"; export default { name: "codemirror", components: { codemirror }, ...
首先我的项目是 vue2 版本的,vue codemirror v5/v6已经发布。这是一个基于以下内容的新版本CodeMirror@6并且仅对Vue3可用。自从CodeMirror@6新版本将不再支持直接浏览器引用UMD模块。简而言之,新版本是与之前的版本完全不兼容。如果您希望继续使用Vue2或更低版本的CodeMirror。
首先我的项目是 vue2 版本的,vue codemirror v5/v6已经发布。这是一个基于以下内容的新版本CodeMirror@6并且仅对Vue3可用。自从CodeMirror@6新版本将不再支持直接浏览器引用UMD模块。简而言之,新版本是与之前的版本完全不兼容。如果您希望继续使用Vue2或更低版本的CodeMirror。
在上面的代码中,通过mode: 'text/x-sql'已经启用了SQL语法高亮。CodeMirror会根据你设置的模式自动应用相应的语法高亮。 3. 实现CodeMirror编辑器的SQL语法检查功能 为了实现SQL语法检查功能,你需要引入一个支持SQL lint的库,例如sql-lint。首先,安装sql-lint: bash npm install sql-lint 然后,在Vue组件中配置Code...
yarn add vue-codemirror ``` 安装完成后,可以在 Vue 项目中引入 vue-codemirror 组件。 1. 在组件中引入 vue-codemirror 组件: ```javascript import Codemirror from 'vue-codemirror' ``` 2. 在组件中使用 vue-codemirror 组件: 在模板中,可以使用 v-bind 指令将 Codemirror 组件与父组件的数据和属性绑定...
vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter 2、然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter"; 3、接下来就是针对需要格式化的代码调用该方法就OK啦 ...
本次功能是tab页打开多个sql编辑器,效果图: 安装: cnpm i codemirror HTML: <textarea:id="'mycode'+(index*1+1)":ref="'mycode'+(index*1+1)"v-model="item.sqlContent"class="CodeMirror-hints":class="'mycode'+(index*1+1)"placeholder="按Ctrl键进行代码提示"/> ...