Inserta el editor de MolDraw en tu sitio
Añade un editor de moléculas en vivo a un blog de química, una lección, una página de prácticas, un artículo de documentación o una app. Copia un iframe, pégalo donde deba aparecer el dibujo y ajusta la altura para que el lienzo encaje en tu diseño.
Para quién es
Usa la inserción cuando el lector deba probar una estructura junto a tu explicación, no solo mirar una imagen.
- Blogueros de química: un lienzo funcional debajo de una entrada sobre una reacción o una estructura.
- Docentes y autores de LMS: un cuadro de dibujo en una lección, un manual de laboratorio o una hoja de problemas.
- Autores de documentación: un editor junto a una nota sobre un formato, SMILES o un flujo de trabajo.
- Desarrolladores de apps: un marco de editor listo dentro de una página que ya tiene su propia interfaz.
No tienes que alojar el editor. El marco lo carga desde https://www.moldraw.com/embed. Tu página sigue siendo tuya.
Copiar y pegar
Copiar código de inserción copia este fragmento en tu portapapeles. Pégalo en el HTML de tu página, en un bloque HTML de un LMS o en el marcado de tu app.
<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>Si el marco aparece en blanco, puede que tu sitio o tu plataforma de cursos bloquee las inserciones. Usa un bloque HTML o de inserción que permita iframes. Si la plataforma sigue eliminando el marco, enlaza a www.moldraw.com en su lugar.
Vista previa
Es el mismo reproductor que carga el fragmento. Dibuja un enlace o elige una plantilla. La barra superior forma parte de la inserción.
Tamaño del marco
El ancho es del 100 % para que el editor ocupe la columna donde lo coloques. La altura es de 640 píxeles, suficiente para la barra de herramientas y una estructura pequeña. Aumenta el número de height para un lienzo más grande. Bájalo hacia 480 en una página corta o usa unos 800 cuando los lectores necesiten más espacio.
En un móvil, un marco alto implica más desplazamiento. Ajusta la altura a la tarea: un boceto rápido puede ser más bajo; un esquema de reacción necesita más espacio.
Abrir en MolDraw
Dentro del reproductor, Open in MolDraw abre el editor completo en www.moldraw.com en una pestaña nueva. Tu página sigue abierta. Díselo a los lectores una vez: que dibujen aquí y usen Open in MolDraw si quieren la pantalla completa.
Preguntas frecuentes
¿Para quién es?
Para blogueros de química, docentes, autores de LMS, redactores de documentación y desarrolladores de apps que quieren un editor de moléculas junto a su propio texto. No es lo adecuado si solo necesitas un logotipo o una captura de pantalla; en ese caso, enlaza a MolDraw o usa una imagen.
¿Los lectores necesitan una cuenta?
No. Pueden dibujar en el marco sin registrarse en tu sitio. Open in MolDraw está ahí cuando quieran el editor completo.
¿Puedo cambiar el tamaño después de pegarlo?
Sí. Edita height en el fragmento. Deja width="100%" salvo que tu diseño necesite un ancho fijo. La vista previa de esta página mide 640 píxeles de alto en una pantalla ancha y menos en un móvil.
El marco aparece en blanco. ¿Qué hago?
Un marco en blanco suele significar que la plataforma bloquea los iframes. Cambia al bloque HTML o de inserción de la plataforma. Si sigue sin funcionar, envía a los lectores a www.moldraw.com con un enlace normal.