Nhúng trình soạn thảo MolDraw vào trang web của bạn

Đăng: 18/09/2026 · Tác giả: Scidart Academy

Thêm một trình soạn thảo phân tử trực tiếp vào blog hóa học, bài học, trang thí nghiệm, bài tài liệu hoặc ứng dụng. Sao chép một iframe, dán vào nơi hình vẽ cần xuất hiện, và đặt chiều cao để khung vẽ vừa với bố cục.

Minh họa một trang web có trình soạn thảo MolDraw được nhúng trong iframe, hiển thị cấu trúc caffeine
Một iframe đưa trình soạn thảo MolDraw vào bất kỳ bài blog, bài học hay trang tài liệu nào.
Tóm tắt: nhấn Sao chép mã nhúng, dán đoạn mã vào HTML của bạn, và bắt đầu với chiều cao 640 pixel. Người đọc vẽ ngay tại chỗ. Open in MolDraw mở trình soạn thảo đầy đủ trong thẻ mới.

Dành cho ai

Hãy dùng bản nhúng khi người đọc nên thử vẽ một cấu trúc ngay cạnh lời giải thích của bạn, chứ không chỉ nhìn một bức hình.

  • Người viết blog hóa học — một khung vẽ hoạt động bên dưới bài viết về phản ứng hay cấu trúc.
  • Giáo viên và người soạn bài LMS — một ô vẽ trong bài học, sổ tay thí nghiệm hoặc bộ bài tập.
  • Người viết tài liệu — một trình soạn thảo bên cạnh ghi chú về định dạng, SMILES hoặc quy trình.
  • Nhà phát triển ứng dụng — một khung soạn thảo sẵn có bên trong trang đã có giao diện riêng.

Bạn không cần tự lưu trữ trình soạn thảo. Khung nạp nó từ https://www.moldraw.com/embed. Trang của bạn vẫn là của bạn.

Sao chép và dán

Sao chép mã nhúng đưa đoạn mã này vào bộ nhớ tạm. Dán nó vào HTML của trang, khối HTML trong LMS, hoặc mã giao diện của ứng dụng.

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

Nếu khung trống, trang web hoặc công cụ khóa học của bạn có thể chặn nội dung nhúng. Hãy dùng khối HTML hoặc khối nhúng cho phép iframe. Nếu nền tảng vẫn gỡ khung, hãy liên kết tới www.moldraw.com thay thế.

Xem trước

Đây chính là trình phát mà đoạn mã nạp vào. Hãy vẽ một liên kết hoặc chọn một mẫu. Thanh ở phía trên là một phần của bản nhúng.

Kích thước khung

Chiều rộng là 100% để trình soạn thảo lấp đầy cột chứa nó. Chiều cao là 640 pixel, đủ cho thanh công cụ và một cấu trúc nhỏ. Tăng số height để có khung vẽ lớn hơn. Giảm xuống khoảng 480 trên trang ngắn, hoặc dùng khoảng 800 khi người đọc cần nhiều chỗ hơn.

Trên điện thoại, khung cao nghĩa là phải cuộn nhiều hơn. Hãy chọn chiều cao theo nhiệm vụ: phác thảo nhanh có thể thấp hơn; một sơ đồ phản ứng cần nhiều không gian hơn.

Mở trong MolDraw

Trong trình phát, Open in MolDraw mở trình soạn thảo đầy đủ tại www.moldraw.com trong thẻ mới. Trang của bạn vẫn mở. Hãy nói với người đọc một lần: phác thảo ở đây, và dùng Open in MolDraw nếu muốn toàn màn hình.

Hỏi đáp

Dành cho ai?

Người viết blog hóa học, giáo viên, người soạn bài trên LMS, người viết tài liệu và nhà phát triển ứng dụng muốn có trình soạn thảo phân tử bên cạnh nội dung của mình. Nó không phù hợp nếu bạn chỉ cần logo hay ảnh chụp màn hình. Khi đó, hãy liên kết tới MolDraw hoặc dùng hình ảnh.

Người đọc có cần tài khoản không?

Không. Họ có thể vẽ trong khung mà không cần đăng ký trên trang của bạn. Nút Open in MolDraw luôn có sẵn khi họ muốn dùng trình soạn thảo đầy đủ.

Có thể đổi kích thước sau khi dán không?

Có. Sửa height trong đoạn mã. Giữ width="100%" trừ khi bố cục cần chiều rộng cố định. Bản xem trước trên trang này cao 640 pixel trên màn hình rộng và thấp hơn trên điện thoại.

Khung bị trống. Phải làm sao?

Khung trống thường có nghĩa là nền tảng chặn iframe. Hãy chuyển sang khối HTML hoặc khối nhúng của nền tảng. Nếu vẫn không được, hãy dẫn người đọc tới www.moldraw.com bằng một liên kết thông thường.

Cập nhật lần cuối: