Встраивание редактора MolDraw на ваш сайт
Добавьте живой редактор молекул в химический блог, урок, страницу лабораторной, статью документации или приложение. Скопируйте один iframe, вставьте его туда, где должен быть рисунок, и задайте высоту, чтобы холст вписался в вёрстку.
Для кого это
Встраивайте редактор, когда читатель должен попробовать нарисовать структуру рядом с вашим объяснением, а не только посмотреть на картинку.
- Авторам химических блогов — рабочий холст под постом о реакции или структуре.
- Преподавателям и авторам курсов в LMS — поле для рисования в уроке, лабораторном практикуме или сборнике задач.
- Авторам документации — редактор рядом с описанием формата, SMILES или порядка работы.
- Разработчикам приложений — готовый фрейм редактора на странице, у которой уже есть свой интерфейс.
Вам не нужно размещать редактор у себя. Фрейм загружает его с https://www.moldraw.com/embed. Ваша страница остаётся вашей.
Копирование и вставка
Кнопка Copy embed code копирует этот фрагмент в буфер обмена. Вставьте его в HTML своей страницы, HTML-блок LMS или разметку приложения.
<iframe src="https://www.moldraw.com/embed" title="MolDraw editor" width="100%" height="640" style="border:0;border-radius:12px" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>Если фрейм пустой, ваш сайт или учебная платформа, возможно, блокирует встраивание. Используйте HTML-блок или блок встраивания, который разрешает iframe. Если платформа всё равно удаляет фрейм, дайте вместо него ссылку на www.moldraw.com.
Предпросмотр
Это тот же плеер, который загружает фрагмент. Нарисуйте связь или выберите шаблон. Панель вверху — часть встраиваемого редактора.
Размер фрейма
Ширина — 100 %, поэтому редактор заполняет колонку, в которую вы его вставили. Высота — 640 пикселей: этого хватает для панели инструментов и небольшой структуры. Увеличьте число height для большего холста. На короткой странице уменьшите его примерно до 480, а если читателям нужно больше места — поставьте около 800.
На телефоне высокий фрейм означает больше прокрутки. Подбирайте высоту под задачу: для быстрого наброска хватит меньшей, а схеме реакции нужно больше места.
Открыть в MolDraw
Внутри плеера кнопка Open in MolDraw открывает полный редактор на www.moldraw.com в новой вкладке. Ваша страница остаётся открытой. Скажите читателям один раз: рисуйте здесь, а если нужен полный экран — нажмите Open in MolDraw.
Вопросы и ответы
Для кого это?
Для авторов химических блогов, преподавателей, авторов курсов в LMS, технических писателей и разработчиков приложений, которым нужен редактор молекул рядом с их текстом. Если вам нужен только логотип или снимок экрана, это не лучший вариант — дайте ссылку на MolDraw или используйте изображение.
Нужна ли читателям учётная запись?
Нет. Они могут рисовать во фрейме без регистрации на вашем сайте. Кнопка Open in MolDraw откроет полный редактор, если он понадобится.
Можно ли изменить размер после вставки?
Да. Измените height во фрагменте. Оставьте width="100%", если вёрстке не нужна фиксированная ширина. Предпросмотр на этой странице имеет высоту 640 пикселей на широком экране и меньше на телефоне.
Фрейм пустой. Что делать?
Пустой фрейм обычно означает, что площадка блокирует iframe. Используйте HTML-блок или блок для встраивания на платформе. Если и это не помогает, отправьте читателей на www.moldraw.com обычной ссылкой.