Intégrer l'éditeur MolDraw à votre site
Ajoutez un éditeur de molécules en direct à un blog de chimie, une leçon, une page de TP, un article de documentation ou une application. Copiez une iframe, collez-la là où le dessin doit apparaître et réglez la hauteur pour que le canevas s'adapte à votre mise en page.
Pour qui
Utilisez l'intégration lorsqu'un lecteur doit pouvoir essayer une structure à côté de votre explication, et pas seulement regarder une image.
- Blogueurs en chimie — un canevas fonctionnel sous un article sur une réaction ou une structure.
- Enseignants et auteurs de cours en ligne — une zone de dessin dans une leçon, un manuel de TP ou une feuille d'exercices.
- Rédacteurs de documentation — un éditeur à côté d'une note sur un format, les SMILES ou une méthode de travail.
- Développeurs d'applications — un cadre d'éditeur prêt à l'emploi dans une page qui a déjà sa propre interface.
Vous n'hébergez pas l'éditeur. Le cadre le charge depuis https://www.moldraw.com/embed. Votre page reste la vôtre.
Copier-coller
Copier le code d'intégration place cet extrait dans votre presse-papiers. Collez-le dans le HTML de votre page, dans un bloc HTML de votre plateforme de cours ou dans le balisage de votre application.
<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 le cadre est vide, votre site ou votre outil de cours bloque peut-être les intégrations. Utilisez un bloc HTML ou d'intégration qui autorise les iframes. Si la plateforme supprime toujours le cadre, mettez plutôt un lien vers www.moldraw.com.
Aperçu
C'est le même lecteur que celui chargé par l'extrait. Dessinez une liaison ou choisissez un modèle. La barre du haut fait partie de l'intégration.
Dimensionner le cadre
La largeur est de 100 % pour que l'éditeur remplisse la colonne où vous le placez. La hauteur est de 640 pixels, de quoi afficher la barre d'outils et une petite structure. Augmentez la valeur height pour un canevas plus grand. Descendez vers 480 sur une page courte, ou utilisez environ 800 lorsque les lecteurs ont besoin de plus de place.
Sur un téléphone, un cadre haut oblige à faire défiler davantage. Adaptez la hauteur à la tâche : un croquis rapide peut rester plus court ; un schéma réactionnel demande plus d'espace.
Ouvrir dans MolDraw
Dans le lecteur, Open in MolDraw ouvre l'éditeur complet sur www.moldraw.com dans un nouvel onglet. Votre page reste ouverte. Dites-le une fois aux lecteurs : esquissez ici, et utilisez Open in MolDraw pour passer en plein écran.
FAQ
À qui s'adresse-t-il ?
Aux blogueurs en chimie, enseignants, auteurs de cours en ligne, rédacteurs de documentation et développeurs d'applications qui veulent un éditeur de molécules à côté de leur propre texte. Il convient mal si vous n'avez besoin que d'un logo ou d'une capture d'écran. Dans ce cas, mettez un lien vers MolDraw ou utilisez une image.
Les lecteurs ont-ils besoin d'un compte ?
Non. Ils peuvent dessiner dans le cadre sans s'inscrire sur votre site. Open in MolDraw est là lorsqu'ils veulent l'éditeur complet.
Puis-je changer la taille après l'avoir collée ?
Oui. Modifiez height dans l'extrait. Laissez width="100%" sauf si votre mise en page exige une largeur fixe. L'aperçu de cette page mesure 640 pixels de haut sur un grand écran et moins sur un téléphone.
Le cadre est vide. Que faire ?
Un cadre vide signifie généralement que l'hébergeur bloque les iframes. Passez au bloc HTML ou d'intégration de la plateforme. Si cela échoue encore, envoyez les lecteurs vers www.moldraw.com avec un lien normal.