--- title: "在你的网站中嵌入 MolDraw | 免费分子编辑器 iframe" url: https://www.moldraw.com/zh/blog/embed-moldraw.html description: "在你的网站中嵌入 MolDraw 编辑器。复制一段 iframe，粘贴到博客、课程、文档页面或应用中，并设置框架高度。附实时预览。" lang: zh-CN publisher: Scidart Academy generated: 2026-10-26 --- ## 本页内容 适合谁 复制和粘贴 预览 设置框架尺寸 在 MolDraw 中打开 常见问题 # 在你的网站中嵌入 MolDraw 编辑器 发布：2026年9月18日 · 作者：Scidart Academy 为化学博客、课程、实验页面、文档文章或应用添加一个实时分子编辑器。复制一段 iframe，粘贴到需要绘图的位置，并设置高度，使画布适合你的布局。 ![示意图：网页中通过 iframe 嵌入了 MolDraw 编辑器，显示咖啡因结构](https://www.moldraw.com/blog/thumbs/embed-moldraw-editor.webp) 一段 iframe 就能把 MolDraw 编辑器放进任意博客文章、课程或文档页面。 **简要说明：**点击“复制嵌入代码”，把代码片段粘贴到你的 HTML 中，高度先设为 640 像素。读者可以直接在页面中绘图。Open in MolDraw 会在新标签页中打开完整编辑器。 ## 适合谁 当你希望读者在你的讲解旁边亲手试画一个结构，而不只是看一张图片时，就可以使用嵌入功能。 - **化学博主**——在反应或结构文章下方放一个可用的画布。 - **教师和 LMS 课程作者**——在课程、实验手册或习题中加入一个绘图框。 - **文档作者**——在关于格式、SMILES 或工作流程的说明旁放一个编辑器。 - **应用开发者**——在已有自身界面的页面中放入一个现成的编辑器框架。 你无需自行托管编辑器。框架会从 [https://www.moldraw.com/embed](https://www.moldraw.com/embed) 加载它，你的页面依然完全属于你。 ## 复制和粘贴 “复制嵌入代码”会把这段代码片段复制到剪贴板。将其粘贴到你页面的 HTML、LMS 的 HTML 块或应用的标记中。 ``` ``` 如果框架是空白的，可能是你的网站或课程平台屏蔽了嵌入内容。请使用允许 iframe 的 HTML 块或嵌入块。如果平台仍然移除框架，请改为链接到 [www.moldraw.com](https://www.moldraw.com/zh/)。 ## 预览 这就是代码片段加载的同一个播放器。画一根键或选择一个模板试试。顶部的栏是嵌入内容的一部分。 ## 设置框架尺寸 宽度为 100%，使编辑器填满你放置它的那一栏。高度为 640 像素，足以容纳工具栏和一个小结构。想要更大的画布，就调高 `height` 数值。页面较短时可降到 480 左右，读者需要更多空间时可设为约 800。 在手机上，框架越高，需要滚动的就越多。请根据任务调整高度：快速草图可以矮一些；[反应式](https://www.moldraw.com/zh/tools/free-chem-tools/chemical-reaction-drawer.html)则需要更多空间。 ## 在 MolDraw 中打开 在播放器中，**Open in MolDraw** 会在新标签页中打开 [www.moldraw.com](https://www.moldraw.com/zh/) 上的完整编辑器，你的页面保持打开。可以告诉读者一次：在这里画草图，想全屏使用时点击 Open in MolDraw。 ## 常见问题 ### 适合谁使用？ 希望在自己的文字旁放一个分子编辑器的化学博主、教师、LMS 课程作者、文档作者和应用开发者。如果你只需要一个标志或截图，它就不太合适，此时请链接到 MolDraw 或使用图片。 ### 读者需要账户吗？ 不需要。他们无需在你的网站上注册即可在框架中绘图。想用完整编辑器时，可以点击 Open in MolDraw。 ### 粘贴后还能修改尺寸吗？ 可以。修改代码片段中的 `height`。除非布局需要固定宽度，否则保持 `width="100%"`。本页中的预览在宽屏上高 640 像素，在手机上更矮。 ### 框架是空白的，怎么办？ 框架空白通常意味着宿主网站屏蔽了 iframe。请改用平台的 HTML 块或嵌入块。如果仍然不行，就用普通链接把读者引导到 [www.moldraw.com](https://www.moldraw.com/zh/)。 最后更新：2026年10月14日 ## 相关工具与指南 继续使用 [NMR 谱图查看器](https://www.moldraw.com/zh/tools/nmr-viewer/)、[红外光谱查看器](https://www.moldraw.com/zh/tools/ir-viewer/)和[质谱查看器](https://www.moldraw.com/zh/tools/mass-spec-viewer/)。它们都是免费的，并在浏览器中运行。 [**NMR 谱图查看器**打开 1H 和 13C NMR 文件](https://www.moldraw.com/zh/tools/nmr-viewer/)[**红外光谱查看器**找峰并识别官能团](https://www.moldraw.com/zh/tools/ir-viewer/)[**质谱查看器**同位素、加合物和碎片丢失](https://www.moldraw.com/zh/tools/mass-spec-viewer/)[**紫外-可见光谱查看器**最大吸收波长、朗伯-比尔定律、带隙](https://www.moldraw.com/zh/tools/uv-vis-viewer/)[**波谱指南**全部谱图解读指南](https://www.moldraw.com/guides/)[**全部化学工具**转换器、计算器、查看器](https://www.moldraw.com/zh/tools/)[**MolDraw 编辑器**在浏览器中绘制结构](https://www.moldraw.com/zh/)[**学习 MolDraw**简短的动手课程](https://www.moldraw.com/learn/)