@silly_yi/easy-sql-editor

SQL 编辑器组件：代码高亮、关键字提示、表/字段提示（支持异步回调）、自动语法校验并标记错误。容器/实例管理使用 jQuery。

安装

npm i @silly_yi/easy-sql-editor

要求：

• peerDependencies：jquery >= 3

快速开始（推荐：createEasySqlEditor）

import { createEasySqlEditor } from "@silly_yi/easy-sql-editor";

const editor = createEasySqlEditor("#sqlEditor", {
  dialect: "mysql",
  height: 280,
  placeholder: "请输入 SQL…",
  value: "SELECT * FROM user u WHERE u.",

  onRequestTables: async ({ prefix }) => {
    return ["user", "orders", "order_item"].filter((t) =>
      t.toLowerCase().startsWith(prefix.toLowerCase())
    );
  },

  onRequestFields: async ({ tableOrAlias, prefix }) => {
    if (tableOrAlias === "u" || tableOrAlias === "user") {
      return ["id", "name", "created_at"].filter((c) =>
        c.toLowerCase().startsWith(prefix.toLowerCase())
      );
    }
    return [];
  },

  onChange: (sql) => {
    console.log("changed:", sql);
  },

  onValidate: ({ valid, diagnostics }) => {
    console.log("valid:", valid, diagnostics);
  }
});

editor.focus();

jQuery 插件用法（可选）

import { installEasySqlEditorJQueryPlugin } from "@silly_yi/easy-sql-editor";
import $ from "jquery";

installEasySqlEditorJQueryPlugin();

$("#sqlEditor").easySqlEditor({
  dialect: "postgres",
  height: 280
});

const editor = $("#sqlEditor").data("easySqlEditor");
console.log(editor?.getValue());

浏览器 script 标签用法（无打包器）

适用于直接在页面里用 <script> 引入（需要你自己引入 jQuery）。

<div id="sqlEditor"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="./node_modules/@silly_yi/easy-sql-editor/dist/index.global.js"></script>
<script>
  const editor = window.EasySqlEditor.createEasySqlEditor("#sqlEditor", {
    dialect: "mssql",
    height: 280
  });
  editor.focus();
</script>

API

createEasySqlEditor(container, options)

• container: string | HTMLElement | JQuery
• options: EasySqlEditorOptions

返回：EasySqlEditor 实例。

EasySqlEditor 实例方法

• getValue()：获取原始 SQL（多行，保留换行）
• getValue({ singleLine: true })：获取单行 SQL（把空白压成一个空格，便于粘贴到 Navicat）
• setValue(value)：设置 SQL
• focus()：聚焦
• validate()：手动触发一次校验并返回 { valid, diagnostics }
• destroy()：销毁实例

Options（EasySqlEditorOptions）

常用配置：

• value?: string 初始内容
• dialect?: "mysql" | "postgres" | "sqlite" | "mssql" | "standard"
• readOnly?: boolean
• placeholder?: string
• height?: number | string（如 280 或 "300px"）
• minHeight?: number | string
• maxHeight?: number | string
• extraKeywords?: string[] 额外关键字提示

提示回调（可同步返回或返回 Promise）：

• onRequestTables?: (ctx) => string[] | Completion[] | Promise<(string|Completion)[]>
  • ctx.prefix：当前已输入前缀
  • ctx.sql：全文 SQL
  • ctx.pos：光标位置
• onRequestFields?: (ctx) => string[] | Completion[] | Promise<(string|Completion)[]>
  • ctx.tableOrAlias：u. 中的 u
  • ctx.prefix：字段前缀
  • ctx.sql / ctx.pos

事件回调：

• onChange?: (value: string) => void
• onValidate?: ({ valid, diagnostics }) => void

语法校验说明

• 编辑过程中会自动校验，并在编辑器中用红色波浪线/左侧标记显示错误。
• onValidate 会在内容变化时被触发（有节流延迟），并在初始化时触发一次。
• validate() 可用于你在提交/保存前做一次手动校验。

本仓库本地运行示例

npm i
npm run build
npx http-server . -p 8089

打开：

• http://127.0.0.1:8089/index.html

发布到 npm（示例）

npm login
npm publish --access public