TutuDocs · Встраиваемый компонент
Одна строка кода — добавьте редактор документов на свой сайт за секунды
Встройте редактор документов TutuDocs (вёрстка / таблицы / изображения / структура) на любой свой сайт. Посетители пишут документы прямо на вашем сайте, темы настраиваются, а обновления продукта применяются автоматически — от вас нулевое обслуживание.
Скопируйте и вставьте — перед тегом
</body> вашей страницы <script src="https://tutudocs.com/embed.js"
data-key="pk_live_YOUR_KEY"
data-mount="#tutudocs-editor" defer></script>Замените pk_live_YOUR_KEY на ключ, который вы сами создаёте в консоли (любой зарегистрированный пользователь — без проверки, мгновенно); контейнеру #tutudocs-editor нужны ширина и высота. При настройке зарегистрируйте адрес встраивания (белый список; для локальной разработки укажите localhost) — компонент отображается только на зарегистрированных вами сайтах.
Попробовать вживую
Нажмите кнопку ниже, чтобы попробовать встроенный редактор документов прямо здесь.
JS API (для колбэков / кастомизации)
<script src="https://tutudocs.com/embed.js"></script>
<script>
const editor = TutuDocs.mount('#tutudocs-editor', {
key: 'pk_live_YOUR_KEY',
theme: 'auto', // auto | light | dark
onSave: (file) => {
// file.dataUrl = the exported Word document (.docx, base64)
upload(file.dataUrl);
}
});
// After the user clicks Done, onSave returns the .docx; or call it directly:
// const { dataUrl } = await editor.export();
</script>Полная конфигурация параметров
| Параметр | Тип | Описание |
|---|---|---|
| key | string | Ваш публичный ключ pk_ (создаётся в консоли). Обязательно. |
| theme | 'auto'|'light'|'dark' | Тема; auto следует за светлым/тёмным режимом хоста/системы. |
| saveText | string | Текст кнопки «Готово» (по умолчанию «Завершить и отправить», ≤16 символов). Отображается в родной верхней панели редактора (рядом с «Поделиться»/«История»). |
| hideSuite | boolean | Скрыть лаунчер набора (по умолчанию скрыт при встраивании, чтобы меньше отвлекать). |
Методы
editor.export()Экспортировать текущий документ в .docx → Promise<{dataUrl,mime,size}>.editor.setTheme('dark')Переключить тему во время работы.editor.destroy()Демонтировать компонент (удаляет iframe).
Колбэки событий
onReady()Редактор готов.onSave(file)Пользователь нажимает «Готово» → file.dataUrl — экспортированный документ Word (.docx).onError(e)e.message в понятном виде (не включено / нет прав / ошибка загрузки).onClose()Полноэкранный оверлей закрыт.
Безопасность · Автообновления
- · Самообслуживание, автоодобрение: любой зарегистрированный пользователь указывает в консоли имя сайта и адрес встраивания и получает ключ, работающий мгновенно.
- · Ключ публичный; защиту от злоупотреблений обеспечивает бело-/чёрный список зарегистрированных адресов (чёрный список приоритетнее). Незарегистрированные домены отклоняются с подсказкой о регистрации; вы можете приостановить или возобновить в любой момент.
- · Реальная статистика источников: каждая загрузка учитывается по Origin (включая заблокированные); консоль показывает разбивку по источникам, а незарегистрированный домен можно добавить в белый список одним кликом.
- · Редактор работает на собственном домене TutuDocs (изолированно); ваша страница не получает никаких учётных данных TutuDocs, а приватные документы TutuDocs посетителя никогда не появляются во встроенном компоненте.
- · Компонент размещается и автоматически обновляется силами TutuDocs — обновления функций не требуют изменений в вашем коде; нулевое обслуживание.