Демонстрация виджетов K-Editor

Интерактивные блоки, которые можно вставить в любой документ через кнопку ⚙ в тулбаре

---

⚙️ Как работают виджеты

Каждый виджет — это HTML-блок с атрибутами data-widget и data-config. При наведении курсора появляются кнопки ✏️ (редактировать) и 🗑️ (удалить). В тулбаре нажмите кнопку ⚪ Виджет — откроется панель выбора из 13 типов.

🎠 Карусель изображений

Галерея с автоматической прокруткой, точками навигации и стрелками. Настраивается скорость автоплея. Идеально для портфолио и промо-блоков.

▶️ YouTube видео

Вставка YouTube-видео с настройками автовоспроизведения, беззвучного режима и зацикливания. Поддерживает все форматы ссылок YouTube.

🎬 Vimeo видео

Аналог YouTube, но для платформы Vimeo. Также поддерживает autoplay, loop и mute.

🖼️ Галерея изображений

Сетка картинок с настраиваемым количеством колонок. При клике открывается лайтбокс с полноэкранным просмотром. Отлично подходит для фотогалерей.

🎵 Аудиоплеер

Встроенный аудиоплеер с возможностью автовоспроизведения, зацикливания и выбора режима предзагрузки. Поддерживает MP3, WAV, OGG.

💬 Цитата-блок

Стилизованная цитата с указанием автора и источника. Три стиля оформления: classic, modern и minimal. Используйте для выделения важных мыслей.

⏰ Таймер обратного отсчёта

Обратный отсчёт до указанной даты. Три стиля: классический, современный и flip (переворачивающиеся карточки). Идеально для анонсов событий и запусков.

🗺️ Карта OpenStreetMap

Интерактивная карта с маркером и всплывающей подсказкой. Настраиваются координаты, масштаб и текст маркера. Использует OpenStreetMap — бесплатно и без API-ключей.

💻 Блок кода с подсветкой

Отображение кода с выбором языка, номерами строк и кнопкой копирования. Поддерживает JavaScript, Python, PHP, HTML, CSS и другие языки.

📊 Опрос

Интерактивное голосование с вариантами ответов. Поддерживает множественный выбор и анонимное голосование. Результаты отображаются в реальном времени.

↕️ Отступ с линией

Настраиваемый вертикальный отступ для визуального разделения секций. Можно добавить декоративную линию. Полезно для структурирования длинных документов.

🔧 Свой HTML

Произвольный HTML-код для блоков, которые не покрываются стандартными виджетами. Вставляйте любую разметку: баннеры, промо-блоки, кастомные формы.

🎤 Голосовое сообщение

Нажмите на ✏️ в редакторе чтобы записать голос через микрофон

📝 Как вставить виджет

1. Нажмите кнопку ⚙ Виджет в панели инструментов
2. Выберите тип виджета из карточек
3. Заполните настройки в форме
4. Нажмите Вставить
5. Виджет появится в редакторе как блок с JSON-конфигом
6. При наведении — кнопки ✏️ редактировать и 🗑️ удалить