在你的网站中嵌入 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。