--- title: "Встраивание MolDraw на ваш сайт | Бесплатный редактор молекул в iframe" url: https://www.moldraw.com/ru/blog/embed-moldraw.html description: "Встройте редактор MolDraw на свой сайт. Скопируйте один iframe, вставьте его в блог, курс, документацию или приложение и задайте высоту фрейма. С живым предпросмотром." lang: ru publisher: Scidart Academy generated: 2026-10-26 --- ## На этой странице Для кого это Копирование и вставка Предпросмотр Размер фрейма Открыть в MolDraw Вопросы и ответы # Встраивание редактора MolDraw на ваш сайт Опубликовано: 18 сентября 2026 г. · Автор: Scidart Academy Добавьте живой редактор молекул в химический блог, урок, страницу лабораторной, статью документации или приложение. Скопируйте один iframe, вставьте его туда, где должен быть рисунок, и задайте высоту, чтобы холст вписался в вёрстку. ![Иллюстрация веб-страницы со встроенным в iframe редактором MolDraw и структурой кофеина](https://www.moldraw.com/blog/thumbs/embed-moldraw-editor.webp) Один iframe помещает редактор MolDraw в любой пост, урок или страницу документации. **Коротко:** нажмите Copy embed code, вставьте фрагмент в HTML и начните с высоты 640 пикселей. Читатели рисуют прямо на странице. Кнопка Open in MolDraw открывает полный редактор в новой вкладке. ## Для кого это Встраивайте редактор, когда читатель должен попробовать нарисовать структуру рядом с вашим объяснением, а не только посмотреть на картинку. - **Авторам химических блогов** — рабочий холст под постом о реакции или структуре. - **Преподавателям и авторам курсов в LMS** — поле для рисования в уроке, лабораторном практикуме или сборнике задач. - **Авторам документации** — редактор рядом с описанием формата, SMILES или порядка работы. - **Разработчикам приложений** — готовый фрейм редактора на странице, у которой уже есть свой интерфейс. Вам не нужно размещать редактор у себя. Фрейм загружает его с [https://www.moldraw.com/embed](https://www.moldraw.com/embed). Ваша страница остаётся вашей. ## Копирование и вставка Кнопка Copy embed code копирует этот фрагмент в буфер обмена. Вставьте его в HTML своей страницы, HTML-блок LMS или разметку приложения. ``` ``` Если фрейм пустой, ваш сайт или учебная платформа, возможно, блокирует встраивание. Используйте HTML-блок или блок встраивания, который разрешает iframe. Если платформа всё равно удаляет фрейм, дайте вместо него ссылку на [www.moldraw.com](https://www.moldraw.com/ru/). ## Предпросмотр Это тот же плеер, который загружает фрагмент. Нарисуйте связь или выберите шаблон. Панель вверху — часть встраиваемого редактора. ## Размер фрейма Ширина — 100 %, поэтому редактор заполняет колонку, в которую вы его вставили. Высота — 640 пикселей: этого хватает для панели инструментов и небольшой структуры. Увеличьте число `height` для большего холста. На короткой странице уменьшите его примерно до 480, а если читателям нужно больше места — поставьте около 800. На телефоне высокий фрейм означает больше прокрутки. Подбирайте высоту под задачу: для быстрого наброска хватит меньшей, а [схеме реакции](https://www.moldraw.com/ru/tools/free-chem-tools/chemical-reaction-drawer.html) нужно больше места. ## Открыть в MolDraw Внутри плеера кнопка **Open in MolDraw** открывает полный редактор на [www.moldraw.com](https://www.moldraw.com/ru/) в новой вкладке. Ваша страница остаётся открытой. Скажите читателям один раз: рисуйте здесь, а если нужен полный экран — нажмите Open in MolDraw. ## Вопросы и ответы ### Для кого это? Для авторов химических блогов, преподавателей, авторов курсов в LMS, технических писателей и разработчиков приложений, которым нужен редактор молекул рядом с их текстом. Если вам нужен только логотип или снимок экрана, это не лучший вариант — дайте ссылку на MolDraw или используйте изображение. ### Нужна ли читателям учётная запись? Нет. Они могут рисовать во фрейме без регистрации на вашем сайте. Кнопка Open in MolDraw откроет полный редактор, если он понадобится. ### Можно ли изменить размер после вставки? Да. Измените `height` во фрагменте. Оставьте `width="100%"`, если вёрстке не нужна фиксированная ширина. Предпросмотр на этой странице имеет высоту 640 пикселей на широком экране и меньше на телефоне. ### Фрейм пустой. Что делать? Пустой фрейм обычно означает, что площадка блокирует iframe. Используйте HTML-блок или блок для встраивания на платформе. Если и это не помогает, отправьте читателей на [www.moldraw.com](https://www.moldraw.com/ru/) обычной ссылкой. Последнее обновление: 14 октября 2026 г. ## Похожие инструменты и руководства Продолжайте с инструментами [просмотра спектров ЯМР](https://www.moldraw.com/ru/tools/nmr-viewer/), [просмотра ИК-спектров](https://www.moldraw.com/ru/tools/ir-viewer/) и [просмотра масс-спектров](https://www.moldraw.com/ru/tools/mass-spec-viewer/). Они бесплатны и работают в браузере. [**Просмотр спектров ЯМР**Открывайте файлы ЯМР 1H и 13C](https://www.moldraw.com/ru/tools/nmr-viewer/)[**Просмотр ИК-спектров**Поиск пиков и функциональных групп](https://www.moldraw.com/ru/tools/ir-viewer/)[**Просмотр масс-спектров**Изотопы, аддукты и потери](https://www.moldraw.com/ru/tools/mass-spec-viewer/)[**Просмотр УФ-видимых спектров**Lambda max, закон Бугера–Ламберта–Бера, ширина запрещённой зоны](https://www.moldraw.com/ru/tools/uv-vis-viewer/)[**Руководства по спектроскопии**Все руководства по чтению спектров](https://www.moldraw.com/guides/)[**Все химические инструменты**Конвертеры, калькуляторы, просмотр спектров](https://www.moldraw.com/ru/tools/)[**Редактор MolDraw**Рисуйте структуры в браузере](https://www.moldraw.com/ru/)[**Изучайте MolDraw**Короткие практические уроки](https://www.moldraw.com/learn/)