--- title: "在你的網站上嵌入 MolDraw | 免費分子編輯器 Iframe" url: https://www.moldraw.com/zh-hant/blog/embed-moldraw.html description: "在你的網站上嵌入 MolDraw 編輯器。複製一段 iframe，貼到部落格、課程、說明文件頁面或應用程式中，並設定框架高度。附即時預覽。" lang: zh-Hant 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-hant/)。 ## 預覽 這就是程式碼片段所載入的同一個播放器。畫一根鍵或選一個範本試試看。頂端的列是嵌入內容的一部分。 ## 設定框架大小 寬度為 100%，讓編輯器填滿你放置它的欄位。高度為 640 像素，足以容納工具列與一個小結構。想要更大的畫布，就調高 `height` 數值。頁面較短時可降到 480 左右，讀者需要更多空間時可設為約 800。 在手機上，框架越高就要捲動越多。請依工作調整高度：快速草圖可以矮一點；[反應流程圖](https://www.moldraw.com/zh-hant/tools/free-chem-tools/chemical-reaction-drawer.html)則需要更多空間。 ## 在 MolDraw 中開啟 在播放器中，**Open in MolDraw** 會在新分頁開啟 [www.moldraw.com](https://www.moldraw.com/zh-hant/) 上的完整編輯器，你的頁面仍保持開啟。不妨告訴讀者一次：在這裡畫草圖，想用全螢幕時就點 Open in MolDraw。 ## 常見問題 ### 適合哪些人？ 想在自己的文字旁邊放一個分子編輯器的化學部落客、教師、LMS 課程作者、說明文件作者與應用程式開發者。如果你只需要一個標誌或截圖，就不太適合，這時請連結到 MolDraw 或使用圖片。 ### 讀者需要帳號嗎？ 不需要。他們不必在你的網站上註冊，就能在框架中繪圖。想用完整編輯器時，可以點 Open in MolDraw。 ### 貼上之後還能修改大小嗎？ 可以。修改程式碼片段中的 `height`。除非版面需要固定寬度，否則請保持 `width="100%"`。本頁的預覽在寬螢幕上高 640 像素，在手機上則較矮。 ### 框架一片空白，怎麼辦？ 框架空白通常表示主機網站封鎖了 iframe。請改用平台的 HTML 或嵌入區塊。若仍然不行，就用一般連結把讀者導向 [www.moldraw.com](https://www.moldraw.com/zh-hant/)。 最後更新：2026 年 10 月 14 日 ## 相關工具與指南 接著試試 [NMR 光譜檢視器](https://www.moldraw.com/zh-hant/tools/nmr-viewer/)、[IR 光譜檢視器](https://www.moldraw.com/zh-hant/tools/ir-viewer/)與[質譜檢視器](https://www.moldraw.com/zh-hant/tools/mass-spec-viewer/)。它們都是免費的，而且直接在瀏覽器中執行。 [**NMR 光譜檢視器**開啟 1H 與 13C NMR 檔案](https://www.moldraw.com/zh-hant/tools/nmr-viewer/)[**IR 光譜檢視器**找出峰與官能基](https://www.moldraw.com/zh-hant/tools/ir-viewer/)[**質譜檢視器**同位素、加成離子與碎片損失](https://www.moldraw.com/zh-hant/tools/mass-spec-viewer/)[**UV-Vis 光譜檢視器**λmax、比爾–朗伯定律、能隙](https://www.moldraw.com/zh-hant/tools/uv-vis-viewer/)[**光譜學指南**所有判讀指南](https://www.moldraw.com/guides/)[**所有化學工具**轉換工具、計算器、檢視器](https://www.moldraw.com/zh-hant/tools/)[**MolDraw 編輯器**在瀏覽器中繪製結構](https://www.moldraw.com/zh-hant/)[**學習 MolDraw**簡短的實作課程](https://www.moldraw.com/learn/)