Документация SQLize Embed
SQLize Embed — это легкий и адаптивный редактор и исполнитель SQL, который можно встроить в любой веб-сайт. Он позволяет вашим пользователям выполнять SQL-запросы к различным движкам баз данных прямо в браузере.
Ключевые особенности
- Поддержка нескольких движков: Поддерживает MySQL (8.0, 9.3), PostgreSQL (14-18), MS SQL Server, MariaDB (11.4, 11.8), SQLite, Oracle, Firebird, ClickHouse и другие.
- Готовые наборы данных: Доступ к предустановленным базам данных, таким как Sakila, OpenFlights и Bookings.
- Адаптивный дизайн: Работает на компьютерах и мобильных устройствах.
- Динамическая инициализация: Автоматически обнаруживает новые редакторы, добавленные на страницу через AJAX или бесконечную прокрутку.
- На базе Ace Editor: Качественная подсветка кода и удобство редактирования.
Начало работы
1. Подключите скрипт
Добавьте следующий тег скрипта в раздел <head> или перед закрывающим тегом </body> вашего сайта:
<script src="https://sqlize.online/js/sqlize-embed.js"></script>
2. Добавьте контейнер редактора
Создайте элемент div с атрибутом data-sqlize-editor. Вы можете указать версию базы данных и количество видимых строк для редактора.
<div data-sqlize-editor
data-sql-version="mysql80"
code-rows="10">
SELECT * FROM sakila.actor LIMIT 5;
</div>
Атрибуты конфигурации
| Атрибут | Описание | По умолчанию |
|---|---|---|
data-sqlize-editor |
Обязательный атрибут для идентификации контейнера как редактора. | N/A |
data-sql-version |
Движок базы данных для использования (например, mysql80, psql17, sqlite3). |
mysql80 |
code-rows |
Фиксированное количество строк, которое должен отображать редактор. | 12 |
result-rows |
Фиксированное количество строк, которое должен отображать блок результатов. | 12 |
data-read-only |
Установите в true, чтобы запретить редактирование. |
false |
data-sqlize-id |
Уникальный идентификатор контейнера редактора. | N/A |
data-sqlize-parent |
Атрибут data-sqlize-id родительского редактора, код которого будет добавлен в начало. |
N/A |
Поддерживаемые версии баз данных
Используйте эти значения в атрибуте data-sql-version:
| Значение | Движок базы данных |
|---|---|
mysql80 | MySQL 8.0 |
mysql93 | MySQL 9.3.0 |
mariadb123 | MariaDB 12.3 |
mariadb118 | MariaDB 11.8 |
mariadb | MariaDB 10 |
psql14 | PostgreSQL 14 |
psql15 | PostgreSQL 15 |
psql16 | PostgreSQL 16 |
psql17 | PostgreSQL 17 + PostGIS |
psql18 | PostgreSQL 18 |
mssql2017 | MS SQL Server 2017 |
mssql2019 | MS SQL Server 2019 |
mssql2022 | MS SQL Server 2022 |
mssql2025 | MS SQL Server 2025 |
sqlite3 | SQLite 3 |
oracle21 | Oracle Database 21c |
oracle23 | Oracle Database 26ai |
firebird4 | Firebird 4.0 |
firebird5 | Firebird 5.0 |
clickhouse | ClickHouse |
Примечание: также доступны предустановленные наборы данных, такие как mysql80_sakila, mariadb118_openflights и psql10demo.
Сценарии использования
Образовательные блоги и руководства
Идеально для обучения SQL. Предоставляйте интерактивные примеры, где студенты могут изменять запросы и мгновенно видеть результаты без установки какого-либо программного обеспечения.
Документация для инструментов баз данных
Добавляйте разделы "Попробовать сейчас" в вашу документацию, чтобы продемонстрировать специфические возможности движка базы данных.
Портфолио и технические интервью
Демонстрируйте сложные SQL-запросы в своем блоге или используйте его как простую платформу для технических оценок.
Ценовая политика
SQLize Embed распространяется на основе платной подписки.
- Лицензирование по доменам: Подписка требуется для каждого домена верхнего уровня, на котором размещен скрипт.
- Цена по запросу: Мы предлагаем гибкое ценообразование в зависимости от вашего трафика и требований к использованию.
Для получения индивидуального предложения и лицензионного ключа, пожалуйста, свяжитесь с нами по адресу support@sqlize.com.
Примеры
PostgreSQL с PostGIS
<div data-sqlize-editor data-sql-version="psql17" code-rows="5">
SELECT postgis_full_version();
</div>
SQLite (Пустой редактор)
<div data-sqlize-editor data-sql-version="sqlite3">
-- Введите ваш запрос SQLite здесь
</div>
Редактор только для чтения
<div data-sqlize-editor data-sql-version="mysql80" data-read-only="true">
-- Этот код нельзя редактировать
SELECT 'Вы можете видеть меня, но не можете трогать!' as message;
</div>
Лицензия
Этот скрипт использует редактор Ace Editor, который распространяется под лицензией BSD 3-Clause. Используя этот скрипт, вы соглашаетесь с Условиями использования SQLize Embed.
Пример встраивания SQLize.online
Эта страница демонстрирует, как встроить интерактивный редактор SQL с помощью скрипта sqlize-embed.js.
Вы можете указать версию базы данных с помощью атрибута data-sql-version.
1. Пример MySQL 8.0
2. Пример PostgreSQL 15
3. Пример MariaDB 11.8 с типом Vector
4. Пример только для чтения
Для этого редактора установлено значение data-read-only="true", что означает, что вы можете запустить запрос, но не можете его изменить.
5. Пример с настраиваемой высотой результата
Этот редактор использует result-rows="6", чтобы сделать блок результатов меньше, чем по умолчанию.
6. Цепочки SQL-запросов
Вы можете объединять несколько редакторов в цепочку. Когда вы запускаете редактор, у которого есть атрибут data-sqlize-parent, код из всех родительских редакторов в цепочке (начиная с корня) будет добавлен к коду текущего редактора перед выполнением.
Пример: Цепочка Родитель-Потомок
Первый редактор создает таблицу, а второй вставляет данные и выбирает их. Запуск второго редактора автоматически включает инструкцию CREATE TABLE из первого.
Как использовать:
- Подключите скрипт:
<script src="/js/sqlize-embed.js"></script> - Добавьте контейнер:
<div data-sqlize-editor data-sql-version="mysql80">SELECT ...</div>