Osadź edytor MolDraw na swojej stronie
Dodaj działający edytor cząsteczek do bloga chemicznego, lekcji, strony laboratoryjnej, artykułu w dokumentacji lub aplikacji. Skopiuj jeden iframe, wklej go tam, gdzie ma pojawić się rysunek, i ustaw wysokość tak, aby płótno pasowało do układu.
Dla kogo
Użyj osadzenia, gdy czytelnik ma wypróbować strukturę obok Twojego wyjaśnienia, a nie tylko oglądać obrazek.
- Blogerzy chemiczni — działające płótno pod wpisem o reakcji lub strukturze.
- Nauczyciele i autorzy kursów LMS — pole do rysowania w lekcji, instrukcji laboratoryjnej lub zestawie zadań.
- Autorzy dokumentacji — edytor obok opisu formatu, SMILES lub sposobu pracy.
- Twórcy aplikacji — gotowa ramka edytora na stronie, która ma już własny interfejs.
Nie hostujesz edytora. Ramka wczytuje go z https://www.moldraw.com/embed. Twoja strona pozostaje Twoja.
Kopiuj i wklej
Kopiuj kod osadzenia umieszcza ten fragment w schowku. Wklej go do HTML swojej strony, bloku HTML w LMS lub kodu swojej aplikacji.
<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>Jeśli ramka jest pusta, Twoja strona lub platforma kursowa może blokować osadzanie. Użyj bloku HTML lub bloku osadzania, który pozwala na iframe'y. Jeśli platforma nadal usuwa ramkę, podlinkuj zamiast tego www.moldraw.com.
Podgląd
To ten sam odtwarzacz, który wczytuje fragment kodu. Narysuj wiązanie lub wybierz szablon. Pasek u góry jest częścią osadzenia.
Rozmiar ramki
Szerokość wynosi 100%, więc edytor wypełnia kolumnę, w której go umieścisz. Wysokość to 640 pikseli, co wystarcza na pasek narzędzi i małą strukturę. Zwiększ liczbę height, aby uzyskać większe płótno. Zmniejsz ją do około 480 na krótkiej stronie albo ustaw około 800, gdy czytelnicy potrzebują więcej miejsca.
Na telefonie wysoka ramka oznacza więcej przewijania. Dopasuj wysokość do zadania: szybki szkic może być niższy, a schemat reakcji potrzebuje więcej miejsca.
Otwórz w MolDraw
W odtwarzaczu przycisk Open in MolDraw otwiera pełny edytor pod adresem www.moldraw.com w nowej karcie. Twoja strona pozostaje otwarta. Powiedz to czytelnikom raz: szkicujcie tutaj, a jeśli chcecie pełnego ekranu, użyjcie Open in MolDraw.
FAQ
Dla kogo to jest?
Dla blogerów chemicznych, nauczycieli, autorów kursów LMS, autorów dokumentacji i twórców aplikacji, którzy chcą mieć edytor cząsteczek obok własnego tekstu. Nie sprawdzi się, jeśli potrzebujesz tylko logo lub zrzutu ekranu. Wtedy podlinkuj MolDraw albo użyj obrazu.
Czy czytelnicy potrzebują konta?
Nie. Mogą rysować w ramce bez rejestracji na Twojej stronie. Open in MolDraw jest dostępne, gdy chcą pełnego edytora.
Czy mogę zmienić rozmiar po wklejeniu?
Tak. Zmień height we fragmencie kodu. Zostaw width="100%", chyba że Twój układ wymaga stałej szerokości. Podgląd na tej stronie ma 640 pikseli wysokości na szerokim ekranie i mniej na telefonie.
Ramka jest pusta. Co teraz?
Pusta ramka zwykle oznacza, że serwis blokuje iframe'y. Przełącz się na blok HTML lub blok osadzania danej platformy. Jeśli to nadal nie działa, odeślij czytelników do www.moldraw.com zwykłym linkiem.