내 사이트에 MolDraw 편집기 삽입하기

누구를 위한 기능인가

독자가 그림만 보는 것이 아니라 설명 옆에서 직접 구조식을 그려 봐야 할 때 임베드를 사용하세요.

• 화학 블로거 — 반응이나 구조식 글 아래에 실제로 쓸 수 있는 캔버스.
• 교육자와 LMS 저자 — 수업, 실험 매뉴얼, 문제 세트 안의 그리기 상자.
• 문서 작성자 — 파일 형식, SMILES, 작업 흐름 설명 옆의 편집기.
• 앱 개발자 — 자체 인터페이스가 있는 페이지 안에 바로 쓸 수 있는 편집기 프레임.

편집기를 직접 호스팅할 필요가 없습니다. 프레임이 https://www.moldraw.com/embed에서 편집기를 불러옵니다. 페이지는 온전히 여러분의 것입니다.

복사해서 붙여 넣기

임베드 코드 복사를 누르면 이 코드 조각이 클립보드에 복사됩니다. 페이지 HTML, LMS HTML 블록, 앱의 마크업에 붙여 넣으세요.

<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>

프레임이 비어 있다면 사이트나 강의 도구가 임베드를 차단하고 있을 수 있습니다. iframe을 허용하는 HTML 블록이나 임베드 블록을 사용하세요. 그래도 플랫폼이 프레임을 지운다면 대신 www.moldraw.com으로 링크하세요.

미리 보기

코드 조각이 불러오는 것과 같은 플레이어입니다. 결합을 그리거나 템플릿을 골라 보세요. 위쪽 바도 임베드의 일부입니다.

프레임 크기 정하기

너비가 100%라서 편집기가 넣은 단을 가득 채웁니다. 높이는 640픽셀로, 툴바와 작은 구조식에 충분합니다. 캔버스를 크게 하려면 height 값을 늘리세요. 짧은 페이지에서는 480 정도로 줄이고, 독자에게 공간이 더 필요하면 800 정도를 사용하세요.

휴대폰에서는 프레임이 높을수록 스크롤이 늘어납니다. 높이를 용도에 맞추세요. 간단한 스케치는 낮게 두어도 되고, 반응식은 공간이 더 필요합니다.

MolDraw에서 열기

플레이어 안의 Open in MolDraw를 누르면 새 탭에서 www.moldraw.com의 전체 편집기가 열립니다. 여러분의 페이지는 그대로 열려 있습니다. 독자에게 한 번만 알려 주세요: 여기서 스케치하고, 전체 화면이 필요하면 Open in MolDraw를 쓰라고요.

자주 묻는 질문

누구를 위한 기능인가요?

자신의 글 옆에 분자 편집기를 두고 싶은 화학 블로거, 교육자, LMS 저자, 문서 작성자, 앱 개발자를 위한 기능입니다. 로고나 스크린숏만 필요하다면 적합하지 않습니다. 그럴 때는 MolDraw로 링크하거나 이미지를 사용하세요.

독자에게 계정이 필요한가요?

아니요. 독자는 가입하지 않고도 내 사이트의 프레임 안에서 그릴 수 있습니다. 전체 편집기가 필요하면 Open in MolDraw를 누르면 됩니다.

붙여 넣은 뒤에 크기를 바꿀 수 있나요?

네. 코드 조각의 height를 수정하세요. 레이아웃에 고정 너비가 필요한 경우가 아니면 width="100%"는 그대로 두세요. 이 페이지의 미리 보기는 넓은 화면에서 640픽셀 높이이고 휴대폰에서는 더 낮습니다.

프레임이 비어 있어요. 어떻게 하나요?

프레임이 비어 있다면 대개 호스트가 iframe을 차단한 것입니다. 플랫폼의 HTML 블록이나 임베드 블록으로 바꾸세요. 그래도 안 되면 일반 링크로 독자를 www.moldraw.com으로 안내하세요.