Den MolDraw-Editor in deine Website einbetten
Füge einen interaktiven Moleküleditor in einen Chemie-Blog, eine Lektion, eine Laborseite, einen Doku-Artikel oder eine App ein. Kopiere ein iframe, füge es dort ein, wo die Zeichnung erscheinen soll, und lege die Höhe so fest, dass die Zeichenfläche in dein Layout passt.
Für wen es gedacht ist
Nutze die Einbettung, wenn Leser eine Struktur direkt neben deiner Erklärung ausprobieren sollen, statt nur ein Bild anzusehen.
- Chemie-Blogger – eine funktionierende Zeichenfläche unter einem Beitrag zu einer Reaktion oder Struktur.
- Lehrkräfte und LMS-Autoren – ein Zeichenfeld in einer Lektion, einem Praktikumsskript oder Übungsblatt.
- Doku-Autoren – ein Editor neben einem Hinweis zu Formaten, SMILES oder Arbeitsabläufen.
- App-Entwickler – ein fertiger Editor-Rahmen in einer Seite, die bereits eine eigene Oberfläche hat.
Du hostest den Editor nicht selbst. Der Rahmen lädt ihn von https://www.moldraw.com/embed. Deine Seite bleibt deine.
Kopieren und einfügen
Einbettungscode kopieren legt dieses Snippet in deine Zwischenablage. Füge es in das HTML deiner Seite, einen HTML-Block im LMS oder das Markup deiner App ein.
<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>Ist der Rahmen leer, blockiert deine Website oder dein Kurs-Tool möglicherweise Einbettungen. Nutze einen HTML- oder Einbettungsblock, der iframes erlaubt. Entfernt die Plattform den Rahmen trotzdem, verlinke stattdessen auf www.moldraw.com.
Vorschau
Das ist derselbe Player, den das Snippet lädt. Zeichne eine Bindung oder wähle eine Vorlage. Die Leiste oben gehört zur Einbettung.
Rahmengröße anpassen
Die Breite beträgt 100 %, damit der Editor die Spalte ausfüllt, in die du ihn setzt. Die Höhe beträgt 640 Pixel, genug für die Werkzeugleiste und eine kleine Struktur. Erhöhe den Wert von height für eine größere Zeichenfläche. Geh auf einer kurzen Seite Richtung 480 oder nimm etwa 800, wenn Leser mehr Platz brauchen.
Auf dem Smartphone bedeutet ein hoher Rahmen mehr Scrollen. Passe die Höhe an die Aufgabe an: Für eine schnelle Skizze reicht weniger, ein Reaktionsschema braucht mehr Platz.
In MolDraw öffnen
Im Player öffnet Open in MolDraw den vollständigen Editor unter www.moldraw.com in einem neuen Tab. Deine Seite bleibt geöffnet. Sag es deinen Lesern einmal: Hier skizzieren und Open in MolDraw nutzen, wenn ihr den ganzen Bildschirm wollt.
FAQ
Für wen ist das gedacht?
Für Chemie-Blogger, Lehrkräfte, LMS-Autoren, Doku-Autoren und App-Entwickler, die einen Moleküleditor neben ihrem eigenen Text möchten. Wenig geeignet ist es, wenn du nur ein Logo oder einen Screenshot brauchst. Dann verlinke auf MolDraw oder nutze ein Bild.
Brauchen Leser ein Konto?
Nein. Sie können im Rahmen zeichnen, ohne sich auf deiner Website zu registrieren. Open in MolDraw steht bereit, wenn sie den vollständigen Editor möchten.
Kann ich die Größe nach dem Einfügen ändern?
Ja. Ändere height im Snippet. Lass width="100%" stehen, sofern dein Layout keine feste Breite braucht. Die Vorschau auf dieser Seite ist auf breiten Bildschirmen 640 Pixel hoch und auf dem Smartphone niedriger.
Der Rahmen ist leer. Was nun?
Ein leerer Rahmen bedeutet meist, dass die Plattform iframes blockiert. Wechsle zum HTML- oder Einbettungsblock der Plattform. Klappt es dann immer noch nicht, schicke Leser mit einem normalen Link zu www.moldraw.com.