在你的網站上嵌入 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。