TutuEdit · Встраиваемый виджет

Одна строка кода —добавьте редактор изображений на свой сайт за секунды

Встройте профессиональный редактор TutuEdit (обрезка / фильтры / вырезание / текст) на любой сайт. Посетители редактируют фото прямо на вашем сайте; настройте тему и инструменты, а обновления продукта применяются автоматически при нулевом обслуживании.

Попробовать вживую Посмотреть код встраивания Сгенерировать ключ (без проверки)

Готово к вставке · вставьте перед тегом </body> вашего сайта

<script src="https://tutuedit.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#dd-editor" defer></script>

Замените pk_live_YOUR_KEY на публичный ключ, который вы сами генерируете в консоли (любой зарегистрированный пользователь — без проверки, мгновенно); контейнеру #dd-editor нужны ширина и высота. При встраивании зарегистрируйте свои URL встраивания (список разрешённых; для локальной разработки используйте localhost); он отображается только на зарегистрированных вами сайтах.

Попробовать вживую

Нажмите кнопку ниже, чтобы попробовать встроенный редактор изображений прямо на этой странице.

JS API (для колбэков / кастомизации)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = отредактированное изображение (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // открыть изображение
</script>

Полная конфигурация

Параметр	Тип	Описание
key	string	Ваш публичный ключ pk_ (сгенерированный в консоли). Обязательно.
theme	'auto'\|'light'\|'dark'	Тема; auto следует за светлым или тёмным режимом хоста/системы.
hideToolbar	boolean	Скрыть левую панель инструментов (сценарии минимального просмотра / экспорта в один тап).
hideHeader	boolean	Скрыть верхнюю панель (когда вы создаёте свой UI и экспортируете через export()).
hideOpen	boolean	Скрыть кнопку «Открыть изображение» (разрешить изображения только через dd.open).
hideExport	boolean	Скрыть кнопку «Экспорт и загрузка» (использовать только «Готово и отправить обратно»).
saveText	string	Текст кнопки «Готово» (по умолчанию «Готово и отправить обратно», ≤16 символов).
exportFormat	'png'\|'jpg'\|'webp'	Формат экспорта при завершении.
exportQuality	number 0..1	Качество JPG/WebP.

Методы

dd.open(url, name?)Открыть изображение в редакторе (url или dataURL).
dd.export(format?, quality?)Экспортировать текущий результат → Promise<{dataUrl,mime,size}>.
dd.setTheme('dark')Переключить тему во время выполнения.
dd.destroy()Выгрузить виджет (удаляет iframe).

Колбэки событий

onReady()Редактор готов.
onSave(file)Пользователь нажимает «Done» → file.dataUrl — это отредактированный результат.
onError(e)e.message понятен человеку (отключено / нет доступа / ошибка загрузки).
onClose()Полноэкранный оверлей был закрыт.

Безопасность · Автообновления

· Самообслуживание, автоодобрение: любой зарегистрированный пользователь регистрирует имя сайта + URL встраивания в консоли, чтобы получить ключ, действующий мгновенно.
· Публичный ключ открыт; он защищён списками разрешённых/заблокированных зарегистрированных URL от неправомерного использования (чёрный список приоритетен); запросы с незарегистрированных доменов отклоняются с предложением зарегистрироваться; включайте/отключайте в любой момент.
· Аналитика по реальному источнику: каждая загрузка учитывается по Origin (в том числе заблокированные); консоль показывает разбивку по источникам, а незарегистрированные домены можно добавить в список разрешённых в один тап.
· Редактор работает на собственном домене TutuEdit (изолированно); ваша страница не может получить доступ к учётным данным TutuEdit, а личные работы TutuEdit посетителей никогда не появляются в виджете.
· Виджет размещается и автоматически обновляется силами TutuEdit — обновления функций не требуют изменений кода с вашей стороны, нулевое обслуживание.