De MolDraw-editor insluiten op je site
Voeg een live moleculeditor toe aan een scheikundeblog, les, practicumpagina, documentatieartikel of app. Kopieer één iframe, plak het waar de tekening moet komen en stel de hoogte in zodat het canvas in je lay-out past.
Voor wie
Gebruik de insluiting als een lezer een structuur naast je uitleg moet kunnen uitproberen, niet alleen naar een plaatje moet kijken.
- Scheikundebloggers — een werkend canvas onder een bericht over een reactie of structuur.
- Docenten en auteurs van ELO-content — een tekenvak in een les, practicumhandleiding of opgavenset.
- Schrijvers van documentatie — een editor naast een notitie over een bestandsformaat, SMILES of werkwijze.
- Appbouwers — een kant-en-klaar editorframe in een pagina die al een eigen interface heeft.
Je host de editor niet zelf. Het frame laadt hem van https://www.moldraw.com/embed. Je pagina blijft van jou.
Kopiëren en plakken
Insluitcode kopiëren zet dit fragment op je klembord. Plak het in de HTML van je pagina, een HTML-blok in de ELO of de opmaak van je 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>Is het frame leeg, dan blokkeert je site of cursustool mogelijk insluitingen. Gebruik een HTML- of embedblok dat iframes toestaat. Verwijdert het platform het frame nog steeds, link dan naar www.moldraw.com.
Voorbeeld
Dit is dezelfde speler die het fragment laadt. Teken een binding of kies een sjabloon. De balk bovenaan hoort bij de insluiting.
Framegrootte instellen
De breedte is 100%, zodat de editor de kolom vult waarin je hem plaatst. De hoogte is 640 pixels, genoeg voor de werkbalk en een kleine structuur. Verhoog het getal bij height voor een groter canvas. Ga naar ongeveer 480 op een korte pagina, of gebruik ongeveer 800 als lezers meer ruimte nodig hebben.
Op een telefoon betekent een hoog frame meer scrollen. Stem de hoogte af op de taak: een snelle schets kan lager blijven; een reactieschema heeft meer ruimte nodig.
Openen in MolDraw
In de speler opent Open in MolDraw de volledige editor op www.moldraw.com in een nieuw tabblad. Je pagina blijft open. Zeg het lezers één keer: schets hier en gebruik Open in MolDraw als je het volledige scherm wilt.
FAQ
Voor wie is dit?
Voor scheikundebloggers, docenten, auteurs van ELO-content, schrijvers van documentatie en appbouwers die een moleculeditor naast hun eigen tekst willen. Het past slecht als je alleen een logo of een screenshot nodig hebt. Link in dat geval naar MolDraw of gebruik een afbeelding.
Hebben lezers een account nodig?
Nee. Ze kunnen in het frame tekenen zonder zich op je site aan te melden. Open in MolDraw staat klaar als ze de volledige editor willen.
Kan ik de grootte na het plakken nog wijzigen?
Ja. Pas height aan in het fragment. Laat width="100%" staan, tenzij je lay-out een vaste breedte nodig heeft. Het voorbeeld op deze pagina is 640 pixels hoog op een breed scherm en lager op een telefoon.
Het frame is leeg. Wat nu?
Een leeg frame betekent meestal dat de host iframes blokkeert. Schakel over naar het HTML- of embedblok van het platform. Werkt dat nog steeds niet, stuur lezers dan met een gewone link naar www.moldraw.com.